尝试使用jQuery验证表单，但它不起作用

Question

<div class="login-form-1">
        <form action="" method="post" id="register-form" novalidate="novalidate" class="text-left">
            <div class="login-form-main-message"></div>
            <div class="main-login-form">
                <div class="login-group">
                    <div class="form-group">
                        <label for="reg_username" class="sr-only">Username</label>
                        <input type="text" class="form-control" id="reg_username" name="reg_username" placeholder="username">
                    </div>
                    <div class="form-group">
                        <label for="reg_password" class="sr-only">Password</label>
                        <input type="password" class="form-control" id="reg_password" name="reg_password" placeholder="password">
                    </div>
                    <div class="form-group">
                        <label for="reg_password_confirm" class="sr-only">Password Confirm</label>
                        <input type="password" class="form-control" id="reg_password_confirm" name="reg_password_confirm" placeholder="confirm password">
                    </div>

                    <div class="form-group">
                        <label for="reg_email" class="sr-only">Email</label>
                        <input type="text" class="form-control" id="reg_email" name="reg_email" placeholder="email">
                    </div>


                    <div class="form-group login-group-checkbox">
                        <input type="radio" class="" name="reg_gender" value="male" >
                        <label for="male">male</label>

                        <input type="radio" class="" name="reg_gender" value="female" >
                        <label for="female">female</label>
                    </div>


                    <div class="form-group">
                    <select class="form-control" name = "reg_security" id="select">
                            <option class="others">What is the name of your favorite cartoon character?</option>
                            <option class="others">What was the name of your primary school?</option>
                            <option class="others">What is the name of your best friend?</option>
                            <option class="others">What was the name of your first cell phone?</option>
                    </select>
                    </div>

                    <div class="form-group">
                    <input class="form-control" id="focusedInput" type="text" value="Your answer...">
                    </div>

                </div> 

                <button type="submit" class="login-button"><i class="fa fa-chevron-right"></i></button>

/ *这是名为action.js * /

的相关js文件

(function($) {
    "use strict";

    // Options for Message
    //----------------------------------------------
  var options = {
      'btn-loading': '<i class="fa fa-spinner fa-pulse"></i>',
      'btn-success': '<i class="fa fa-check"></i>',
      'btn-error': '<i class="fa fa-remove"></i>',
      'msg-success': 'All Good! Redirecting...',
      'msg-error': 'Wrong login credentials!',
      'useAJAX': true,
  };


    // Register Form
    //----------------------------------------------
    // Validation
  $("#register-form").validate({
    rules: {
      reg_username: "required",
      reg_password: {
            required: true,
            minlength: 5
        },
        reg_password_confirm: {
            required: true,
            minlength: 5,
            equalTo: "#register-form [name=reg_password]"
        },
        reg_email: {
        required: true,
            email: true
        },
        reg_agree: "required",
    },
      errorClass: "form-invalid",
      errorPlacement: function( label, element ) {
        if( element.attr( "type" ) === "checkbox" || element.attr( "type" ) === "radio" ) {
            element.parent().append( label ); // this would append the label after all your checkboxes/labels (so the error-label will be the last element in <div class="controls"> )
        }
            else {
        label.insertAfter( element ); // standard behaviour
      }
    }
  });

  // Form Submission
  $("#register-form").submit(function() {
    remove_loading($(this));

        if(options['useAJAX'] == true)
        {
            // Dummy AJAX request (Replace this with your AJAX code)
          // If you don't want to use AJAX, remove this
      dummy_submit_form($(this));

          // Cancel the normal submission.
          // If you don't want to use AJAX, remove this
      return false;
        }
  });



    // Loading
    //----------------------------------------------

});

同样也有一个css文件用于样式。 问题是验证功能不在表单上工作。 难道我做错了什么？ 我试过把脚本放在html＆amp;也在一个单独的文件中。 但它不起作用。

Answer 1

删除整个自定义.submit()处理程序，因为它通过阻止submit事件来干扰插件的正常操作...

$("#register-form").submit(function() { ....

然后任何ajax只会在the plugin's submitHandler function ...

内

$("#register-form").validate({
    submitHandler: function(form) {
        // ajax here!
        return false;
    },
    rules: {
        reg_username: "required",
        ....

  

替换默认提交。 正确的地方在验证后通过Ajax提交表单。