Add progressbar fails

Hi,
I’m new here and need some help with the file upload proccess/progressbar.
I have successfully added the progressbar with(in scripts.js):

		$.ajax( {
			type: 'POST',
			url: wpcf7.apiSettings.getRoute(
				'/contact-forms/' + wpcf7.getId( $form ) + '/feedback' ),
			data: formData,
			dataType: 'json',
			processData: false,
			contentType: false,
			// Start       
			beforeSend: function() { 
			progressbox.slideDown(); //show progressbar
			progressbar.width(completed); //initial value 0% of progressbar
			statustxt.html(completed); //set status text
			statustxt.css('color','#000'); //initial color of status text
			},
		 
			xhr: function() {
       		var xhr = new window.XMLHttpRequest();
				xhr.upload.addEventListener("progress", function(event) {
					if (event.lengthComputable) {
						var percentComplete = Math.round((event.loaded * 100) / event.total);
						progressbar.width(percentComplete + '%') //update progressbar percent complete
						statustxt.html(percentComplete + '%'); //update status text  
						if(percentComplete>50) {
							statustxt.css('color','#fff'); //change status text to white after 50% 
						}
					}
			   }, false);

			   return xhr;
			},
						
		
		} ).done( function( data, status, xhr ) {
			ajaxSuccess( data, status, xhr, $form );
			$( '.ajax-loader', $form ).removeClass( 'is-active' );
			myform.resetForm();  // reset form
			submitbutton.removeAttr('disabled'); //enable submit button
			progressbox.slideUp(); // hide progressbar
			//end 

The problem I have now is that the progressbar is displayed even if not all required fields are filled in. The complete file is uploaded and then the error message appears. How can I check the required fields first and then display the progress bar when all fields are filled in?

• This topic was modified 5 years, 10 months ago by kubus1234.

The page I need help with: [log in to see the link]