CODEWITHSUNDEEP
javascriptjqueryvalidation
MultiDev
MultiDev

Reputation: 10649

How to validate form fields with javascript objects?

I am trying to do some simple form validation using javascript object values. I know it's not "ideal", but I'm just working with a simple form that doesn't need to be iron-clad.

Please see my fiddle example: http://jsfiddle.net/6dXd7/3/

I am trying to make sure that each form field has a value. If so, set the value for myObj.fieldID to yes.

Then, when the form is submitted, check every existing myObj.XXX and be sure all their values are yes.

In my example, I am having trouble creating the object, and I don't know how to cycle through all the objects when the submit button is pressed without specifying each one by name.

Here's the code in the jsfiddle example linked to above:

<script>
$(document).ready(function () {
    var myObj = {};
    $("input.checkblank").blur(function () {
        var inputID = $(this).attr("id");
        var contents = $("input#" + inputID).val();
        if (contents == "") {
            $(myObj).data(inputID, "no");
        } else {
            $(myObj).data(inputID, "yes");
        }
    });
    $("#verify").click(function () {
        if (myObj.first && myObj.second == "yes") {
            // ***** Trying to get it to scan through ALL existing myObj's and make sure all their values are "yes" *****        
            $('.results').text('all good');
        } else {
            $('.results').text('not good');
        }
    });
});
</script>

<input type="text" name="first" id="first" class="checkblank"><br />
<input type="text" name="second" id="second" class="checkblank">
<a href="#" id="verify">check</a><br />
<p class="results"> </p>

​ ​

Upvotes: 0

Views: 344

Answers (2)

Rafael Verger
Rafael Verger

Reputation: 1761

You were storing field info in jQuery DATA and trying to check them later not in the same place...

var obj = {}
$(obj).data('a','1');
console.log(obj.a); //this will log null, cause there's no attribute 'a' in 'obj'
console.log($(obj).data('a')); //this will log '1' :]

instead do this, you should store you data in attributes from native object like this:

var obj = {}
obj['a'] = '1'; //obj.a = '1' work's too
console.log(obj.a); //now it log '1' :]

Also, your verification function is wrong.. it only check if first exists inside myObj and if second exists and is equal to "yes". So your verification function should be something like this:

$("#verify").click(function() {
    var allFieldsOK = false;
    for ( var field in checkedFields ) {
        if ( !(allFieldsOK = checkedFields[field] ) ) break;
    }
    $('.results').text(  allFieldsOK ? 'all good' : 'not good' );
});

Here is an update to you jsFiddle, it is working for you purpose and should work if you add more input fields with the class checkblank :] http://jsfiddle.net/6dXd7/5/

Upvotes: 1

Sandeep Rajoria
Sandeep Rajoria

Reputation: 1239

replace this

$("#verify").click(.........});

with this

$("#verify").click(function() {
    var flag=true;
    $('.checkblank').each(function(){    //check all elements with class checkblank
         if($(this).val().length==0)     //set flag false if anyone of them is blank
            flag=false;                 
    })
    if (flag)  {
            $('.results').text('all good');       
        } else {  
            $('.results').text('not good');
        } 
});

...it should work

Upvotes: 0

Related Questions