web-dev-qa-db-ja.com

parsley.jsによる検証後のフォーム送信の防止

私はparsley.jsを何度も使用し、最後に使用したparsleyのコードを文字通りコピーしました。

ただし、フォームを送信するたびにページが更新されます。 preventDefaultは他のページで機能しているようで、ページの更新が停止しますが、何らかの理由で今試したところ、機能しません。誰かがなぜそうしないのか理解できますか？

<script>
    $(function(){
        $("#register_signup").submit(function(e){
            e.preventDefault();
            var form = $(this);
            if ($('#rform').parsley( 'isValid' )){
                alert('valid');
            }
        });
    });
</script>

<form id='rform' name='rform' data-parsley-validate>
    <input id='reg_password' class='register_input' type='text'  autocomplete="off" data-parsley-trigger="change" placeholder='Password' required>
    <input id='reg_cpassword' class='register_input' type='text' name="reg_cpassword" placeholder='Confirm password' data-parsley-equalto="#reg_password" required>

    <input id='register_signup' type="submit" onClick="javascript:$('#rform').parsley( 'validate' );" value='Sign Up' />
</form>
javascriptparsley.js
7
morty

submitイベントをinput要素にバインドしています。 jquery $ .submit（）ドキュメント を確認すると、次のように表示されます。

ユーザーがフォームを送信しようとすると、送信イベントが要素に送信されます。 _<form>_要素にのみアタッチできます。フォームは、明示的な_<input type="submit">_、_<input type="image">_、または_<button type="submit">_をクリックするか、特定のフォーム要素にフォーカスがあるときにEnterキーを押すことで送信できます。

これが主な問題であり、これがalertが表示されない理由です（実際、そのコードは実行されません）。

また、いくつか変更します。

  1. Parsley 2を使用している場合、$('#rform').parsley( 'validate' )は$('#rform').parsley().validate()である必要があります。*
  2. $('#rform').parsley( 'isValid' )は$('#rform').parsley().isValid()である必要があります。
  3. $.on()の代わりに $.submit() を使用します。
  4. _register_signup_要素からonClickを削除します。すでにjavascriptを使用しているので、onclickではなくjavascriptコードで直接これを行います。これはもっと個人的な好みです。

したがって、コードは次のようになります。

_<form id='rform' name='rform'>
    <input id='reg_password' class='register_input' type='text'  autocomplete="off" 
        data-parsley-trigger="change" placeholder='Password' required>
    <input id='reg_cpassword' class='register_input' type='text' name="reg_cpassword"
         placeholder='Confirm password' data-parsley-equalto="#reg_password" required>

    <input id='register_signup' type="submit" value='Sign Up' />
</form>

<script>
    $(document).ready(function() {
        $("#rform").on('submit', function(e){
            e.preventDefault();
            var form = $(this);

            form.parsley().validate();

            if (form.parsley().isValid()){
                alert('valid');
            }
        });
    });
</script>
_
24
Luís Cruz

Data-parsley-validateをフォームに適用する場合、すべての検証が実行されるまで送信を停止するためにフォームにjavascriptを適用する必要はありません。ただし、JavaScriptを適用すると、parsely（）が無効な場合にfalseが返されます。そして、parsley.jsコードファイルが含まれていることを確認してください。

0
Safoor Safdar