电子邮件验证无法使用 jquery validate答案

【问题标题】：Email validation not working using jquery validate电子邮件验证无法使用 jquery validate
【发布时间】：2025-12-10 10:30:01
【问题描述】：

我正在使用 jquery validate 进行表单验证。表单中目前只有一个元素。其他元素稍后添加。form_email 字段为必填项。

这是我的 html 脚本

    <form novalidate="novalidate" name="Emergency Contact Form" action="#" id="form_3" class="form-horizontal">
    <div class="form-body">
            <div class="form-group act">
            <label class="control-label col-md-3">What is your email address? <span class="required">* </span></label>
            <div class="col-md-4">
                <input id="18" name="form_email" class="form-control element" type="email">
            </div>
            <br><br>
            <div class="col-md-offset-3 col-md-9">
                <button type="button" id="btn18" class="btn green">Submit</button>
            </div>
        </div>
    </div>
</form>
<script>
    $(document).ready(function(){
        $("#form_3").validate({
            rules: {
              form_email: { required: true,email: true} 
            },
            messages: {
              form_email: { required:"We require your email address to proceed" }
            }
         });
         $("#btn18").on("click",function(){
             if($("#form_3").valid()){
                getNextQuestion(elementVal);
             }
         });
    });
    </script>

问题是，当我将电子邮件字段保持为空并单击按钮时，它不会提供验证消息。但是当我输入一个无效的电子邮件地址（asdf@ghjk。）并单击按钮时，它会给出验证消息（'请输入有效的电子邮件地址。'）。为什么当字段为空时不提供验证消息。这些 html 元素是通过 ajax 注入的。提前致谢！

【问题讨论】：

当字段为空时，您正确显示的代码会给出消息：jsfiddle.net/ebord060 ~ 请提供一些可以证明问题的内容。
@Sparky 是的，我知道这适用于 jsfidle。但不在我的项目中。整个 div(class="form-body") 以及表单中的 jquery 通过 ajax 加载。然后它没有按预期工作。对此的任何修复。
得到了答案 form.removeData("validator").removeData("unobtrusiveValidation");诀窍
如果它在项目中不起作用，但是你给我们展示的代码是起作用的，那么这个问题并不能帮助我们回答任何问题。

标签： jquery jquery-validate

【解决方案1】：

加入规则-

required: true,
minlength: 2,

并在消息中添加 -

required: "Required input",
minlength: jQuery.validator.format("Please, at least {0} characters are necessary")

【讨论】：

【解决方案2】：

代码看起来没问题。制作了小测试用例，一切都按预期工作。

在触发 DOM 加载事件之前单击按钮可能会出现问题。在这种情况下，按钮不会附加任何事件，并且不会触发验证。您应该尝试调试它。页面上可能有阻止页面加载的内容。

【讨论】：

【解决方案3】：

尝试使用以下代码，我做了一些更改，希望对您有所帮助

<form novalidate="novalidate" name="Emergency Contact Form" action="#" id="form_3" class="form-horizontal">
    <div class="form-body">
        <div class="form-group act">
            <label class="control-label col-md-3">What is your email address? <span class="required">* </span></label>
            <div class="col-md-4">
                <input id="18" name="form_email" class="form-control element" type="email">
            </div>
            <br><br>
            <div class="col-md-offset-3 col-md-9">
                <button type="button" id="btn18" class="btn green">Submit</button>
            </div>
        </div>
    </div>
</form>
<script>
    $(document).ready(function () {

        $("#form_3").submit(function (event) {
            var email = $('#18').val();
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if (email != '' && email != null && emailReg.test( email )) {
                alert('is valid');
            } else {
                alert('not valid');
            }
            event.preventDefault();
        });

        $("#btn18").on("click", function () {
            $('#form_3').submit();
        });
    });
</script>

【讨论】：

【解决方案4】：

This can help 

<html>
<head>

  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <!-- Load jQuery and the validate plugin -->
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

  <!-- jQuery Form Validation code -->
  <script>

  // When the browser is ready...
  $(function() {

    // Setup form validation on the #register-form element
    $("#register-form").validate({

        // Specify the validation rules
        rules: {
            firstname: "required",
            lastname: "required",
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            },
            agree: "required"
        },

        // Specify the validation error messages
        messages: {
            firstname: "Please enter your first name",
            lastname: "Please enter your last name",
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            email: "Please enter a valid email address",
            agree: "Please accept our policy"
        },

        submitHandler: function(form) {
            form.submit();
        }
    });

  });

  </script>
</head>
<body>
  <h1>Register here</h1>

  <!--  The form that will be parsed by jQuery before submit  -->
  <form action="" method="post" id="register-form" novalidate="novalidate">

    <div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
    <div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
    <div class="label">Email</div><input type="text" id="email" name="email" /><br />
    <div class="label">Password</div><input type="password" id="password" name="password" /><br />
    <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>

  </form>

</body>
</html>

Cheers,

Murali P

【讨论】：

这可行，但这是在表单提交上。我想在按钮点击时完成。