Question

我正在使用找到的表单验证脚本 http://jsfiddle.net/RicardoAlves/uemfoaoy/13/

$(document).ready(function() {
  $("#ValidateOrderRegistration").validate({
      rules: {

        FirstName: {
          required: true,
          minlength: 1
        },
        LastName: {
          required: true,
          minlength: 1
        },
        Username: {
          required: true,
          minlength: 2
        },
        Password: {
          required: true,
          minlength: 6
        },
        PasswordConfirm: {
          required: true,
          minlength: 6,
          equalTo: "#f-password"
        },
        EmailAddress: {
          required: true,
          email: true
        },
      },
      messages: {
        FirstName: {
          required: "Please enter your First Name",
          minlength: "Please enter at least 2 characters",
        },
        LastName: {
          required: "Please enter your surname",
          minlength: "Please enter at least 2 characters",
        },

        Password: {
          required: "Enter a 6 or more digits password",
          minlength: "At least 6 characters"
        },
        PasswordConfirm: {
          required: "Confirm Password Password",
          minlength: "Your password must be at least 6 characters"
        },
        EmailAddress: {
          required: "Enter an Email",
          email: "Not Valid"
        },
      },


      errorPlacement: function(error, element) {
        element.val(error[0].outerText);
      }, //Puts errors as placeholders

    }) //add rules
  $(this).find("input[type=text]").each(function() {
      if ($(this).attr("placeholder") == $(this).val())
        $(this).val("");
    }) //validate everything

  $('.cat_textbox').on('click focusin', function() {
    this.value = '';
  }); //cleans fields

  $('#EmailAddress').on('click', function() {
    $('#EmailAddress .error').removeClass('error');
    $(this).addClass('success');
  }); //I tried this!
  $("#EmailAddress").click(function(e) {
    var email = $("#EmailAddress");
    var emailaddressVal = $("#EmailAddress").val();
    var emailReg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;

    if (!emailReg.test(email.val())) {
      email.addClass("error").focus();
    } else {
      email.removeClass("error");
    } //

    return false;
  });

}); //MAIN VALIDATION

一切都很完美，但是当我点击提交按钮并且如果没有正确输入电子邮件时，我无法修改它。错误＆＃34;无效＆＃34;阻止我这样做。

Answer 1

你的整个问题都是由此造成的......

errorPlacement: function(error, element) {
    element.val(error[0].outerText);
}

您正在将字段的值设置为验证错误消息。由于在每次击键时都会验证字段，因此只要您开始键入任何内容，就会用错误消息覆盖字段的值。您在电子邮件字段中看到问题只是因为此字段的规则在键入第一个字符后仍然会触发验证错误。

字段显示的值是用户键入的内容，或者是错误消息......它不能同时出现！

如果在输入字段时输入的值不能同时显示错误消息，您打算如何告诉用户该字段无效？ < / p>

这是默认值：

errorPlacement: function(error, element) {
    error.insertAfter(element);
},

我还删除了所有重复的验证码。

DEMO：http://jsfiddle.net/uemfoaoy/35/

修改：

根据要求，将placeholder更改为错误消息：

errorPlacement: function(error, element) { element.attr('placeholder', error.text()); },

但是，正如我上面尝试解释的那样，如果错误消息是placeholder，那么当用户输入时，用户将无法看到错误消息场。一个非常差的GUI体验IMO。

DEMO 2：http://jsfiddle.net/uemfoaoy/36/

使用javascript的电子邮件验证错误

1 个答案: