2017-07-31 7 views
0

私はfollowing fiddleを持っています。bootbox + AJAXログインフォームのjQuery.validatorが動作しない

モーダル空のフォームでサインインを押すと、バリデータはフィールドを誤ってマークする必要があります。さらに、フォームは検証が成功したときに提出する必要があります。

コンソールにエラーはなく、動作しません。以下の私のコードで

この行は、それがthis other fiddleでするように動作していないようだ。

var form = $("#ajax_login_form"); 
form.validate(); 

私は何を逃したのですか?ありがとう!

/** 
* Login modal form 
*/ 
function loginModal() { 
    var content = $("#login_form").html(); 
    $("#login_form").detach(); 

    bootbox.dialog({ 
    title: "TEST", 
    message: content, 
    size: 'medium', 
    className: 'modal-primary', 
    buttons: { 
     success: { 
     label: "Sign in", 
     className: "btn btn-sm btn-primary", 
     callback: function() { 
      loginValidator(); 
      var form = $("#ajax_login_form"); 
      form.validate(); 
      return false; // keeps dialog open 
     } 
     } 
    }, 
    onEscape: function() { 
     logout(); 
    } 
    }); 
} 

/** 
* Validator for login AJAX form 
*/ 
function loginValidator() { 
    $("#ajax_login_form").validate({ 
    rules: { 
     email: { 
     required: true, 
     email: true 
     }, 
     password: { 
     required: true, 
     minlength: 8 
     } 
    }, 
    messages: { 
     email: "Please enter a valid email address", 
     password: { 
     required: "Please provide a password", 
     minlength: $.validator.format("Your password must be at least {0} characters long") 
     } 
    }, 
    submitHandler: function(form) { 
     alert("submitted!"); 
     return false; 
    } 
    }); 
} 

HTMLは次のとおりです:、私は以下のJSを持ってjQueryのバリデータを使用して

<div id="login_form" style="display:none;"> 

    <form method="post" action="#" accept-charset="UTF-8" class="form" id="ajax_login_form" name="ajax_login_form"> 

    <div class="form-group"> 
     <input class="form-control" id="email" placeholder="Your email" name="email" type="email" /> 
    </div> 

    <div class="form-group"> 
     <input class="form-control" id="password" placeholder="Your password" name="password" type="password" value="" /> 
    </div> 

    <div class="form-group"> 
     <input type="checkbox" name="remember" /> 
     <label for="remember">&nbsp;Remember Me 
     </label> 
    </div> 
    </form> 
</div> 

答えて

1

が置き換え

form.validate(); 

form.valid(); 

これは期待通りに機能するはずです(私にとってはうまくいく)。

編集:あなたはそれが有効かどうフォームを送信したい場合は

form.submit(); 

と交換してください。

+0

はい、はい、検証は空のフィールドで機能しますが、フォームは送信しません。しかし、それは '.validate()'を使って私の他のフィドルで完全に動作しますか? – TheRealPapa

+0

[OK]をクリックし、 '.validate();を' .submit(); 'に置き換えて、フォームが有効であれば送信します。 –

+0

これは他のフィドルで動作するのは、最初のフィドルで 'type =" button "'ボタンを使っているときに 'type =" submit "ボタンを使っているからです。 –

関連する問題