CODEWITHSUNDEEP
jqueryvalidation
Username_null
Username_null

Reputation: 1317

Jquery basic form validation

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.

Upvotes: 0

Views: 561

Answers (4)

The System Restart
The System Restart

Reputation: 2881

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();
    }
})

Upvotes: 1

sbeliv01
sbeliv01

Reputation: 11830

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/

Upvotes: 1

Rizstien
Rizstien

Reputation: 802

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();
}
})

Upvotes: 0

Gaurav Agrawal
Gaurav Agrawal

Reputation: 4431

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

Upvotes: 0

Related Questions