SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question JS form validation only works once

    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. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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

    e.g.
    Code JavaScript:
    if(isError==1) {
        // <snip>
        $('#contact_form #submit').removeAttr("disabled");
        // <snip>
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI,

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


    Code JavaScript:
    $(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’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. #4
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Each line needs to be changed:

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

    Disabled is still active whether it states disabled="disabled" or disabled

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Try

    $('#contact_form #submit').disabled = false;
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •