How to validate form fields with javascript objects?

Question

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>

why are you using jQuery.data() on a plain object? That method is for attaching data to DOM elements as data-attr values. — Evan Davis
– Evan Davis, Commented Apr 11, 2012 at 17:38
jsFiddle is great for demonstrating your code but please also put your code in the post so that this question remains useful long after the link dies. — Sparky
– Sparky, Commented Apr 11, 2012 at 17:39

Rafael Verger · Accepted Answer · 2012-04-11 19:30:57Z

1

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/

edited Apr 11, 2012 at 19:30

answered Apr 11, 2012 at 17:50

Rafael Verger

1,77113 silver badges18 bronze badges

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

3 Comments

Sparky Over a year ago

Please do not rely solely on jsFiddle for the full answer. When the link goes dead, your answer will be incomplete.

MultiDev Over a year ago

Thanks, I tweaked yours a little bit but basically used it. Works good.

Rafael Verger Over a year ago

@Sparky672 thx, i've edited my question to keep it useful without jsFiddle :D

Sandeep Rajoria · Accepted Answer · 2012-04-11 17:50:45Z

0

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

answered Apr 11, 2012 at 17:50

Sandeep Rajoria

1,2498 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to validate form fields with javascript objects?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related