Jquery basic form validation

Question

I am trying to create my own basic form validation without having to resort to heavy, one-size-fits-all plugins and I have written the following code. It doesn't seem to matter how often I rewrite it and start over, I can't seem to get it to work.

The idea is that the script checks the form to see if all the fields have been completed and if so it removes the disabled attribute from the submit button.

The Function:-

function checkForm(){
$('#contact :input').each(function(){
  if($(this).attr('value') == null){
     var checked = false; 
    } else {
     var checked = true;
    }
})
if (checked == true){
   alert('all filled in');
   //remove disabled attribute from button  
} else {
    alert('not completed');
    //add disabled attribute to button
}

}

And the code that calls the function:-

$('#contact :input').blur(function(){
     if ($(this).val() <= ''){
        $(this).next('.error').show();
    } else {
        $(this).next('.error').hide();
        checkForm();
    }
})

I've been messing about with this all day and am struggling to find an answer via Google.

There might be an issue with the way you are comparing if ($(this).val() <= ''){ — TRR
– TRR, Commented May 11, 2012 at 13:52

The System Restart · Accepted Answer · 2012-05-11 14:07:28Z

1

function checkForm(){
  var checked = true;
  $('#contact :input').each(function(){
    if(!$.trim($(this).val()).length) checked = false;
  })
  if (checked){
   alert('all filled in');
   //remove disabled attribute from button  
  } else {
    alert('not completed');
    //add disabled attribute to button
  }
}

And to call the function

$('#contact :input').on('blur', function(){
     if (!$.trim($(this).val()).length){
        $(this).next('.error').show();
    } else {
        $(this).next('.error').hide();
        checkForm();
    }
})

answered May 11, 2012 at 14:07

The System Restart

2,88121 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Username_null Over a year ago

Darn it, I did 'if(checked)' earlier :) - This example seems to be doing what I need it to do - thanks for cutting the code down.

sbeliv01 · Accepted Answer · 2012-05-11 13:59:38Z

Since you're creating the 'checked' variable inside the anonymous function of the .each(), the checked variable is not available outside of that function for your if(checked == true) test (you get a 'checked is undefined' error) which is why your alerts aren't firing.

Try first defining the 'checked' variable outside of the anonymous function and then updating it accordingly.

function checkForm() {

    var checked = true;

    $('#contact :input').each(function () {
        if ($(this).val() == '') {
            checked = false;
        }
    })

    if (checked == true) {
        alert('all filled in');
        //remove disabled attribute from button  
    } else {
        alert('not completed');
        //add disabled attribute to button
    }

}

$('#contact :input').blur(function () {
    if ($(this).val() == '') {
        $(this).next('.error').show();
    } else {
        $(this).next('.error').hide();
        checkForm();
    }
})

Here's a jsFiddle example. http://jsfiddle.net/DMLzK/1/

Gaurav Agrawal · Accepted Answer · 2012-05-11 13:49:30Z

0

you can use jquery.validate() function for this and its reference URL is : http://docs.jquery.com/Plugins/Validation

answered May 11, 2012 at 13:49

Gaurav Agrawal

4,44110 gold badges47 silver badges64 bronze badges

Comments

Rizstien · Accepted Answer · 2012-05-11 13:51:06Z

0

correction :

function checkForm(){
$('#contact :input').each(function(){
 if($(this).val() == ''){
    var checked = false; 
  } else {
 var checked = true;
}
})
if (checked == true){
 alert('all filled in');
 //remove disabled attribute from button  
 } else {
alert('not completed');
//add disabled attribute to button
 }

}

and

$('#contact :input').blur(function(){
 if ($(this).val() == ''){
    $(this).next('.error').show();
} else {
    $(this).next('.error').hide();
    checkForm();
}
})

answered May 11, 2012 at 13:51

Rizstien

8021 gold badge8 silver badges23 bronze badges

3 Comments

Username_null Over a year ago

Thanks for the answer - I'm pretty sure I did try this approach before but I've just tried it again and it's still not triggering any of the alerts at the bottom of the function

Rizstien Over a year ago

then add alert on $(this).val() to check that what value you are getting and what u want to get.

TRR Over a year ago

also check what value you are getting for checked field

Collectives™ on Stack Overflow

Jquery basic form validation

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related