表单未使用validate.min.js进行验证

Question

嗨，我成功使此代码起作用，但我不知道为什么该代码不再起作用，任何人都可以对此进行帮助吗？

这是我的表格

<form action="CreateUser" method="POST" id="subscribe">
     <br>
     <div class="form-group">
          <div class="input-group">
                <span class="input-group-addon"><b>@</b></span>
                <label for="mail"></label>
                <input type="text" class="form-control" name="mail" id="mail" placeholder="Adresse mail">
          </div>
     </div>
     <div class="form-group">
          <div class="input-group">
                 <span class="input-group-addon"><span class="fa fa-user"></span></span>
                 <label for="firstname"></label>
                 <input type="text" class="form-control" name="firstname" id="firstname" placeholder="Entrez votre prenom">
          </div>
     </div>
     <div class="form-group">
           <div class="input-group">
                 <span class="input-group-addon"><span class="fa fa-user"></span></span>
                 <label for="name"></label>
                 <input type="text" class="form-control" name="name" id="name" placeholder="Entrez votre nom">
           </div>
     </div>
     <div class="form-group">
           <div class="form-group">
                 <div class="input-group">
                       <span class="input-group-addon"><span class="fa fa-lock"></span></span>
                       <label for="inputPassword"></label>
                       <input  id="inputPassword" name="inputPassword" type="password" class="form-control" placeholder="Mot de passe">

                  </div>                                  

           </div>    
           <div class="input-group">
                  <span class="input-group-addon"><span class="fa fa-lock"></span></span>
                  <label for="txtConfirmPassword"></label>
                  <input  id="txtConfirmPassword" name="txtConfirmPassword" type="password" class="form-control" placeholder="Retapez votre mot de passe">
           </div>
      </div>
      <br>
      <div class='modal-footer'>
             <button class="btn btn-lg btn-success btn-block"  name="submit" id="register" >Creer votre compte</button>
      </div>
</form>

这是我执行的验证功能：

<script>
   $.validator.setDefaults({

        debug: true,
        success: "valid",

        highlight: function (element) {

            $(element).parent().removeClass('has-success').addClass('has-error');

        },
        unhighlight: function (element) {
            $(element).parent().removeClass('has-error').addClass('has-success');

        },
        errorElement: 'span',
        errorClass: 'text-danger',
        errorPlacement: function (error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());

            } else {
                error.insertAfter(element);
            }
        }
    });

    $.validator.addMethod("onlyletters", function (value, element) {
        return this.optional(element) || /^[a-zA-ZáàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s-]+$/i.test(value);
    }, "Please enter letters only.");

    $.validator.addMethod("passwd", function (value, element) {
        return this.optional(element) || /^[a-zA-Z0-9]+$/i.test(value);
    }, "Please enter letters and numbers only.");

    $('#subscribe').validate({
        rules: {
            inputPassword: {
                required: true,
                minlength: 6,
                maxlength: 12,
                passwd: true
            },
            txtConfirmPassword: {
                required: true,
                minlength: 6,
                maxlength: 12,
                passwd: true,
                equalTo: "#inputPassword"
            },
            mail: {
                required: true,
                email: true
            },
            firstname: {
                required: true,
                maxlength: 20,
                onlyletters: true
            },
            name: {
                required: true,
                maxlength: 20,
                onlyletters: true
            }

        },
        messages: {
            inputPassword: {
                required: "Password is required",
                minlength: "Your password must have 6 characters."
            },
            txtConfirmPassword: {
                required: "Password is required",
                minlength: "Your password must have 6 characters.",
                equalTo: "Your password doesn't match."
            },
            mail: {
                required: "Email is required",
                email: "Your mail address should be like user@example.com"
            }
        }
    });

    $('#register').click( function() {
        // Error checking here.
        if ($('div.error').is(':visible')) {
            return false; 
        }else{

        }
    });
</script>

和导入的jQuery插件

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
    <script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>

该插件是从上一页index.html导入的，此表单是从模式加载的

Answer 1

您的点击事件处理程序不正确。

$('#register').click( function() {
    // Error checking here.
    if ($('div.error').is(':visible')) {
        return false; 
    }else{

    });// This needs to be removed!!!!!

    }

});

工作代码：

$('#register').click( function() {
    // Error checking here.
    if ($('div.error').is(':visible')) {
        return false; 
    } else {

    }
});

Answer 2

.click()语法有问题， 这是 JSFiddle中的工作代码 。

您的错误是}和)问题。