CODEWITHSUNDEEP
javascriptjquery
Jai
Jai

Reputation: 74738

Unable to understand why this validation is not working as intended

My question is i want to validate my form in a javascript object oriented way and i am unable to make it work.

THIS IS THE FIDDLE

HTML:------------------------------------------------------------------------------------------------------

<form id="contact-form" action="#" method="get">
    <ul>
       <li><input type="text" id='fname' name='fname' class='required' placeholder="Firstname"/></li>
       <li><input type="text" id='lname' name='lname' class='required' placeholder="Lastname"/></li>
       <li><input type="password" id='pwd' name='pwd' class='required' placeholder="Password"/></li>
       <li><input type="password" id='confPwd' name='confPwd' class='required' placeholder="Confirm password"/></li>
       <li><input type="text" id='email' name='email' class='required' placeholder="Email"/></li>
       <li><input type="text" id='website' name='website' class='required' placeholder="Website"/></li>
       <li>
           <input type="submit" id='submit' value="Submit" />
       </li>
    </ul>
</form>

JS & JQUERY:---------------------------------------------------------------------------------------------

 var formValidate = {
      validate: function(elem) {
          var frm = elem.attr('id');
           $('.required', '#' + frm).each(function() {
                if ($(this).val() === '') {
                     alert($(this).attr('id') + ' is a required field.'); //<---gets here
                     $(this).focus();
                     return false; // <--not returning false
                }
           });
      }
 };
 $(function() {
     $('form').submit(function() {
           formValidate.validate($('form'));
     });
 });

Upvotes: 1

Views: 166

Answers (3)

Samich
Samich

Reputation: 30125

http://jsfiddle.net/mNu2a/3/

You need to return your validation flag back in submit handler. 

$(function () {
    $('form').submit(function () {
        return formValidate.validate($('form'));
    });
});

Also, your return statement was just interrupting each function, not returning from the validate method.

validate: function (elem) {
    var isValid = true;
    var frm = elem.attr('id');
    $('.required', '#' + frm).each(function () {
        if ($(this).val() === '' && isValid) {
            alert($(this).attr('id') + ' is a required field.');
            $(this).focus();
            isValid = false;
            return false;
        }
    });
    return isValid;
}

And you can a bit simplify validate function:

http://jsfiddle.net/mNu2a/4/

validate: function (elem) {
    var isValid = true;
    $('.required', elem).each(function () {
        var $this = $(this);
        if ($this.val() === '' && isValid) {
            alert($this.attr('placeholder') + ' is a required field.');
            $this.focus();
            isValid = false;
            return false;
        }
    });
    return isValid;
}

Upvotes: 3

tomsseisums
tomsseisums

Reputation: 13367

 var formValidate = {
      validate: function(elem) {
          var frm = elem.attr('id');
           $('.required', '#' + frm).each(function() {
                if ($(this).val() === '') {
                     alert($(this).attr('id') + ' is a required field.');
                     $(this).focus();
                     return false; // <- affects "each" scope, not function scope
                }
           });
      }
 };

Change it to:

 var formValidate = {
      validate: function(elem) {
          var frm = elem.attr('id');

          var invalid = 0;
           $('.required', '#' + frm).each(function() {
                if ($(this).val() === '') {
                     alert($(this).attr('id') + ' is a required field.');
                     $(this).focus();

                     invalid++;

                     return false; // <- affects "each", therefore stopping the loop
                }
           });

          // add these, to also return value from function
          if (invalid > 0) return false;

          return true;
      }
 };

And for your submit handler:

 $(function() {
     $('form').submit(function() {
           return formValidate.validate( $(this) ); // you must pass the returned value to your submit callback
     });
 });

A working example: http://jsfiddle.net/psycketom/QnbKU/

Upvotes: 1

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

use e.preventDefault()

$(function () {
    $('form').submit(function (e) {
        e.preventDefault();
        formValidate.validate($('form'));
    });
});

Upvotes: 1

Related Questions