Question

我使用了www.jqueryvalidation.org上的jquery验证插件，并与bootstrap模态表单集成。 我面临的问题是，验证不适用于模态但是当我在不使用模态的情况下在表单上测试jquery时，它可以工作。请帮忙。

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/navbarscroll.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script src="../../js/applicantFormValidation.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css">
</head>
<body>
    <div class="container">
        <!-- Modal -->
        <div class="modal fade" id="formModal" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss= modal>
                            <span aria-hidden="true">&times;</span> <span class="sr-only ">Close</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel ">Apply for job
                            Position:</h4>
                    </div>

                    <!-- Modal Body -->
                    <div class="modal-body ">
                        <form name="applicationForm" role="form">
                            <!--action="ApplicationFormCheck" method="POST"> -->
                            <div class="form-group row">
                                <label for="firstName" class="col-md-2">First Name</label>
                                <div class="col-md-8 ">
                                    <input type="text" class="form-control" id="firstName"
                                        placeholder="Enter First Name" name="firstName" />
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="lastName" class="col-md-2">Last Name</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" id="lastName"
                                        placeholder="Last Name" name="lastName" />
                                </div>
                            </div>
                            <div style="text-align: center;">
                                <button id="applyNowBtn" type="submit" class="btn btn-default">Apply
                                    Now</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

style.css

form .error {
  color: #ff0000;
}

applicantFormValidation.js

$(document).ready(function() {
    $("#applyNowBtn").click(function(e) {
            e.preventdefault();
        $(function() {
            var form = 
            $("form[name='applicationForm']").validate({
                // Specify validation rules
                rules : {
                    firstName : "required",
                    lastName : "required",
                },
                messages : {
                    firstName : "Please enter your firstname",
                    lastName : "Please enter your lastname",
                },
                submitHandler : function(form) {
                    form.submit();
                }
            });
        });
    });
});

Answer 1

由于您的表单位于模式中，因此DOM中尚不存在。
.validate()方法是在表单
尝试调用.validate()来初始化Modal中的表单上的插件（将<script> jQuery code </script>置于模态正文中并在</form>之后）。
请注意，您正在使用几个jQuery版本（1.12,3.1.1和1.11 - 尝试保留一个）以及可能产生冲突的重复引导文件（js？）。

使用jquery验证插件验证模态表单

1 个答案: