JS form validation only works once

JavaScript
1

Hi,

I am having trouble with my form validation. Each of the fields is required and should be highlighted accompanied by an error message if left blank or if only a space is input.

This works only once after the page loads, if a field is corrected and the form is resubmitted the fields should be revalidated according to the ammended inputs, but this doesn’t happen. The submit seems to remain disabled. but I am not certain this is what is happening.

You can see the form here.

Can anyone help or advise me? I am at a loss…

Thanks in advance.

2

The “disabled” attribute is what’s called a Boolean attribute, meaning it will be applied when it is present.

If you want to re-enable the button, you can use jQuery’s .removeAttr() function to remove the attribute from the button :slight_smile:

e.g.


if(isError==1) {
    // <snip>
    $('#contact_form #submit').removeAttr("disabled");
    // <snip>
3

HI,

Thanks for the response but that doesn’t really help me much this is the JS I am using;

$(document).ready(function() {
	$('#contact_form #submit').click(function() {

		$('#contact_form #formProgress').hide();
		$('#contact_form #formProgress').html('<img src="images/ajax-loader.gif" alt="sending..." />');
		$('#contact_form #formProgress').fadeIn();
		
		$('#contact_form #submit').attr("disabled", "disabled");
		
		$('#contact_form .form_error').html('');
		
		// VALIDATE USER INPUTS //
		
		var isFocus=0;
		var isError=0;
		
		var name=$('#contact_form #name').val();
		var email=$('#contact_form #email').val();
		var subject=$('#contact_form #subject').val();
		var message=$('#contact_form #message').val();
		
		if((name=='') || (name==" ")) {
			$('#contact_form #error_name').html('Please enter your name');
			$('#contact_form #name').focus();
			isFocus=1;
			isError=1;
		}
		
		if((email=='') || (email==" ")) {		
			$('#contact_form #error_email').html('Please enter a valid email address');	
			if(isFocus==0) {	
				$('#contact_form #email').focus(); 
				isFocus=1;
			}
			isError=1;
		} else {	
			var reg = /^([A-Za-z0-9_\\-\\.])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,4})$/;	
			if(reg.test(email)==false) {	
				$('#contact_form #error_email').html('Invalid email address.');	
				if(isFocus==0) {
					$('#contact_form #email').focus();
					isFocus=1;
				}
				isError=1;		
			}
		}
		if((subject=='') || (subject==" ")){
			$('#contact_form #error_subject').html('Please enter a subject');
			if(isFocus==0) {
				$('#contact_form #subject').focus();
				isFocus=1;
			}
			isError=1;
		}
		if((message=='') || (message==" ")) {
			$('#contact_form #error_message').html('Please enter your message');
			if(isFocus==0) {
				$('#contact_form #message').focus();
				isFocus=1;
			}
			isError=1;
		}
		
		// Terminate the script if an error is found
		if(isError==1) {	
			$('#contact_form #form_progress').html('');	
			$('#contact_form #form_progress').hide();		
			
			// Activate the submit button
			$('#contact_form #submit').attr("disabled", "");
			
			return false;	
		}
		
		// SUBMIT THE FORM with AJAX if there aren&#8217;t any errors
		
		$.ajaxSetup ({
			cache: false
		});
		
		
		
		var dataString = 'name='+ name + '&email=' + email + '&subject=' + subject + '&message=' + message;  //creating a variable called dataString in which we are storing our parameters
		
		$.ajax({
			type: "POST",
			url: "php/submit-form-ajax.php",
			data: dataString,
			success: function(msg) {
				
				
				if(msg=='Mail sent') {	
					
					$('#contact_form #form_progress').html('<img src="images/ajax-complete.gif" alt="message sent" />').delay(2000).fadeOut(400);
					
					
					$('#contact_form #name').val('');
					$('#contact_form #email').val('');
					$('#contact_form #subject').val('');
					$('#contact_form #message').val('');
				} else {	
					$('#contact_form #form_progress').html('');	
					alert('There was an error sending your email. Please try again.'); 
				}

				$('#contact_form #submit').attr("disabled", "");
			},
			
			error: function(ob,errStr) {
				$('#contact_form #form_progress').html(''); 	
				alert('There was an error sending your email. Please try again.');	
				
				// Activate the submit button
				$('#contact_form #submit').attr("disabled", "");	// enable the submit button
			}
		});
		
		return false;	
	});
});

You can see that I have lines of code in there that are supposed to do as said. What I am trying to figure out is why it isn’t working. I can’t spot why. Only really a beginner with JS. Was hoping it was something obvious to you seasoned coders.

4

Each line needs to be changed:

// $('#contact_form #submit').attr("disabled", "");
$('#contact_form #submit').removeAttr("disabled");

Disabled is still active whether it states disabled=“disabled” or disabled

5

Try

$(‘#contact_form #submit’).disabled = false;