jQueryを使用したインラインフォーム検証

Question

私はRunningcoderウェブサイトのjQuery検証設定を使用しています。

サインアップフォームをセットアップしました。これはOKフォームを検証しています。私が持っている問題は、フォーム上でsubmitをクリックしても何も起こらないことです。

<form id="form-signup_v2" name="form-signup_v2" method="post" class="validation-form-container" action="index.php"> 

<div class="field"> 
    <label for="signup_v2-firstname">First Name</label> 
    <div class="ui left labeled input"> 
     <input id="signup_v2-firstname" name="signup_v2[firstname]" type="text" data-validation="[NOTEMPTY, NAME, L&gt;=2, TRIM]" data-toggle="popover" data-content="Firstname" data-validation-message="Please enter your firstname."> 
     <div class="ui corner label"> 
      <i class="asterisk icon"></i> 
     </div> 

    </div> 
</div> 
<div class="field"> 
    <label for="signup_v2-lastname">Last Name</label> 
    <div class="ui left labeled input"> 
     <input id="signup_v2-lastname" name="signup_v2[lastname]" type="text" data-validation="[NOTEMPTY, NAME, L&gt;=2, TRIM]" data-toggle="popover" data-content="Surname" data-validation-message="Please enter your surname."> 
     <div class="ui corner label"> 
      <i class="asterisk icon"></i> 
     </div> 

    </div> 
</div> 
<div class="field"> 
    <label for="signup_v2-email">Email</label> 
    <div class="ui left labeled input"> 

     <input id="signup_v2-email" name="signup_v2[email]" type="text" data-validation="[EMAIL]"> 

     <div class="ui corner label"> 
      <i class="asterisk icon"></i> 
     </div> 
    </div> 
</div> 
<div class="field"> 
    <label for="signup_v2-email-confirm">Confirm Email</label> 
    <div class="ui left labeled input"> 

     <input id="signup_v2-email-confirm" name="signup_v2[email-confirm]" type="text" data-validation="[V==signup_v2[email]]" data-validation-message="Your email address does not match."> 
     <div class="ui corner label"> 
      <i class="asterisk icon"></i> 
     </div> 
    </div> 
</div> 
<div class="field"> 
    <div class="ui checkbox"> 
     <input id="signup_v2-agree" name="signup_v2[agree]" data-validation="[NOTEMPTY]" data-validation-message="Please accept the terms and conditions." type="checkbox"> 
     <label class="checkbox" for="signup_v2-agree">I agree the <a href="#">terms and conditions</a></label> 
    </div> 
</div> 

そして、私はすぐにページ上のフォームの下に使用していたスクリプトがされています：私は使用しています形式は、うまくいけば、これは簡単な修正です

<script>    
$.validate({ 
submit: { 
    settings: { 
     form: '#form-signup_v2', 
     inputContainer: '.field', 
     errorListClass: 'ui red pointing below label' 
    }, 
    callback: { 
     onSubmit: function (node, formData) { 
      console.log('~~~~~~~~~') 
      console.log(node) 
      console.log(formData) 
      console.log('~~~~~~~~~') 
     } 
    } 
}, 
dynamic: { 
    settings: { 
     trigger: 'focusout' 
    }, 
    callback: { 
     onSuccess: function (node, input, keyCode) { 
      if ($(input).val()) { 
$(input).parent().find('.ui.corner.label').removeClass('red').addClass('green'); 
      } 
     }, 
     onError: function (node, input, keyCode, error) { 
      $(input).parent().find('.ui.corner.label').removeClass('green'); 
     } 
    } 
} 
});    
</script> 

誰かのためにそこに！ documentationによると、事前

Answer 1

で

ありがとう：

settings.callback.onSubmit

Will be executed if no errors are found.

• Careful, using this callback will override the native HTML form.submit() and prevent the form from submitting by default.

あなたsettings.callback.onSubmitコールのみconsole.log。 JavaScriptコンソールで何かが見えますか？ onSubmitをonBeforeSubmitに置き換えた場合はどうなりますか？

Answer 2

ご協力いただきありがとうございます。私は2つの問題があると考えました。

1）settings.callback.onSubmitは私が行っていた作業では必要ではありませんでしたので、ブロックから削除しました。

2）[送信]ボタンにsubmitのID属性またはName属性が設定されていてはなりません。