Question

我正在使用jquery验证表单验证。截至目前，表单中只有一个元素。其他元素将在稍后添加。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注入的。提前致谢！

Answer 1

加入规则 -

required: true,
minlength: 2,

并在消息中添加 -

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

Answer 2

代码看起来不错。制作小型测试用例，一切都按预期工作。

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

Answer 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>

Answer 4

test_helper.rb

电子邮件验证无法使用jquery验证

4 个答案: