javascript - JQuery 验证不显示错误

Question

由于某种原因，即使我以前使用过类似的代码，JQuery 验证也会出现问题。我有一个简单的表格。

<form id="emailform" class="form-horizontal emailType" role="form">
    <div class="form-group">
        <label for="inputTitle" class="col-lg-4 control-label">Title</label>
        <div class="col-lg-8">
            <select class="form-control" id="inputTitle" name="inputTitle">
                <option value="">Please select...</option>
                <option value="Mr">Mr</option>
                <option value="Mrs">Mrs</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="inputName" class="col-lg-4 control-label">First Name(s)</label>
        <div class="col-lg-8">
            <input type="text" class="form-control" id="inputName" name="inputName" placeholder="First Name(s)">
        </div>
    </div>
    <div class="form-group">
        <label for="inputSurname" class="col-lg-4 control-label">Surname</label>
        <div class="col-lg-8">
            <input type="text" class="form-control" id="inputSurname" name="inputSurname" placeholder="Surname">
        </div>
    </div>
    <div class="form-group">
        <label for="inputMethod" class="col-lg-4 control-label">Delivery Method</label>
        <div class="col-lg-8" id="radioAlign">
            <input type="radio" value="email" id="inputMethod" checked><span id="emailText">Email</span>
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail" class="col-lg-4 control-label">Email</label>
        <div class="col-lg-8">
            <input type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Your Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputLinks" class="col-lg-4 control-label">Link to be sent</label>
        <div class="col-lg-8">
            <select class="form-control" id="inputLinks" name="inputLinks">
                <option value="img/default.jpg">Please select...</option>
                <option value="img/placeholder.jpg">Email1</option>
                <option value="img/placeholder2.jpg">Email2</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-offset-2 col-lg-10">
            <button type="submit" class="btn btn-default">
                Send Message
            </button>
        </div>
    </div>
</form>
<div id="error"></div>

然后我就得到了验证。

$.validator.addMethod(
      "notEqualTo",
      function(elementValue,element,param) {
        return elementValue != param;
      },
      "Value cannot be {0}"
  );

  $.validator.addMethod("myCustomRule", function(value, element) {
    return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{1,}))$/.test(value);
  }, "Please enter a valid email");

  var validator = $("#emailform").validate({
    errorPlacement: function (error, element) {
      $(element)
          .closest("form")
          .find("#error")
          .append(error);
    },
    rules: {
      inputTitle: {
        required: true,
        notEqualTo: "Please select..."
      },
      inputName: {
        required: true,
        minlength: 1
      },
      inputSurname: {
        required: true,
        minlength: 1
      },
      inputEmail: {
        required: true,
        myCustomRule: true,
        minlength: 5,
        email: true
      },
      inputLinks: {
        required: true,
        notEqualTo: "Please select..."
      }
    },
    messages: {
      inputName: {
        minlength: jQuery.validator.format("Please enter a valid name")
      },
      inputSurname: {
        minlength: jQuery.validator.format("Please enter a valid surname")
      },
      inputEmail: {
        minlength: jQuery.validator.format("Your email address is to short")
      }
    },
    submitHandler: function(){
      //Do success stuff here
      return true;
    },
    invalidHandler: function(event,validator) {
      //do error stuff here
      return false;
    }
  });

如果我提交表单，则不会显示我的错误消息。相反，输入会以蓝色边框突出显示。

有什么原因导致我的错误不显示吗？

谢谢

Answer 1

我已更新您的验证按摩代码；

请检查一下，

$.validator.addMethod(
      "notEqualTo",
      function(elementValue,element,param) {
        return elementValue != param;
      },
      "Value cannot be {0}"
  );

  $.validator.addMethod("myCustomRule", function(value, element) {
    return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{1,}))$/.test(value);
  }, "Please enter a valid email");

  var validator = $("#emailform").validate({
    errorPlacement: function (error, element) {
      $(element)
          .closest("form")
          .find("#error")
          .append(error);
    },
    rules: {
      inputTitle: {
        required: true,
        notEqualTo: "Please select..."
      },
      inputName: {
        required: true,
        minlength: 1
      },
      inputSurname: {
        required: true,
        minlength: 1
      },
      inputEmail: {
        required: true,
        myCustomRule: true,
        minlength: 5,
        email: true
      },
      inputLinks: {
        required: true,
        notEqualTo: "Please select..."
      }
    },
    messages: {
      inputName: {
        minlength: jQuery.validator.format("Please enter a valid name")
      },
      inputSurname: {
        minlength: jQuery.validator.format("Please enter a valid surname")
      },
      inputEmail: {
        minlength: jQuery.validator.format("Your email address is to short")
      }
    },
    errorPlacement: function (label, element) { // render error placement for each input type   
                    $('<span class="error"></span>').insertAfter(element).append(label)
                    var parent = $(element).parent('.input-with-icon');
                    parent.removeClass('success-control').addClass('error-control');  
                },

                highlight: function (element) { // hightlight error inputs
                    var parent = $(element).parent();
                    parent.removeClass('success-control').addClass('error-control'); 

                },

                unhighlight: function (element) { // revert the change done by hightlight
                    var parent = $(element).parent();
                    parent.removeClass('error-control').addClass('success-control'); 
                },
    submitHandler: function(){
      //Do success stuff here
      return true;
    },
    invalidHandler: function(event,validator) {
      //do error stuff here
      return false;
    }
  });   

到底有没有用？让我知道