1

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'));
     });
 });
4

3 に答える 3

3

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

submit検証フラグをハンドラーに戻す必要があります。

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

また、returnステートメントは、メソッドeachから戻るのではなく、関数を中断するだけでした。validate

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

そして、検証機能を少し単純化することができます：

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;
}
于 2013-03-12T08:20:54.053 に答える
1 
 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
                }
           });
      }
 };

次のように変更します。

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

そして、送信ハンドラーの場合：

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

実例： http： //jsfiddle.net/psycketom/QnbKU/

于 2013-03-12T08:20:49.247 に答える