【发布时间】：2015-01-12 19:51:05
【问题描述】：
我最近使用 AngularJS 将我的网站升级为单页应用程序配置。自从我无法使用jQuery form validation plugin。我已经包含了所有需要的文件并检查了路径是否正确，但似乎验证是在浏览器中进行的，而不是在我的代码中。
应用程序分为几个HTML文件，动态注入index.html。我包含所需文件的顺序是：
- 所有
CSS文件都加载到Head中，然后是一些代码，包括<div ng-view></div>。 - 然后我加载 JS 文件：jquery、jquery 验证、jquery 表单插件。
/*validate contact form */
$(function() {
$('#contactForm').validate({
rules: {
inputName: {
required: true,
minlength: 2
},
inputEmail: {
required: true,
email: true
},
inputMessage: {
required: true
}
},
messages: {
inputName: {
required: "name needed!",
minlength: "Your name must consist of at least 2 characters"
},
inputEmail: {
required: "email needed!"
},
inputMessage: {
required: "content required!"
}
},//submits the data to the php file using ajax request
submitHandler: function(form) {
$('#contactForm').ajaxSubmit({
type:"POST",
data: $(form).serialize(),
url:"index2.php",
success: function() {
$("#contactForm").hide(1000);
$("#feedback").html("Message sent!").addClass("success");
createDymanicButton();
},
error: function() {
$("#contactForm").hide(1000);
$("#feedback").html("There was an error, please try again later").addClass("failure");
createDymanicButton();
}
});
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script src="//oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<a href="#myModal" target=_self role="button" class="btn btn-large btn-info" data-toggle="modal">form</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">title</h4>
</div>
<!-- end modal-header -->
<div class="modal-body">
<p>contact form</p>
<hr>
<!-- **************** the Form starts here *********-->
<form class="form-horizontal" role="form" id="contactForm" name="contactForm" method="post">
<div class="form-group">
<label class="col-lg-2 control-label" for="inputName">Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputName" name="inputName" placeholder="Your name" type="text" value="" required>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail" name="inputEmail" placeholder="your@email.com" type="email" value="" required>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
<div class="col-lg-10">
<textarea class="form-control" id="inputMessage" name="inputMessage" placeholder="Message" rows="3" required></textarea>
<button class="btn btn-success pull-right" type="submit" name="submit" id="submit">Send</button>
<button class="btn btn-default pull-left" data-dismiss="modal" type="button">Cancel</button>
</div>
</div>
</form>
</div>
<!-- end modal-body -->
<div class="modal-footer">
<!--the footer that will include some feedback-->
<div id="feedback"></div>
</div>
<!-- end of modal footer -->
</div>
<!-- end modal-content -->
</div>
<!-- end modal-dialog -->
</div>
<!-- end myModal -->需要验证的表单位于home.html 文件中。
我尝试将自定义 JS 文件和 jQuery 放在 home.html 的开头，但无论我尝试什么，浏览器都是唯一验证我的表单的东西。
请指教
【问题讨论】：
-
您能提供给我们您的 HTML 表单吗？
-
谢谢，我添加了表单的 HTML 代码
-
@undroid bootstrap 在没有 jQuery 的情况下无法工作，请重新添加 jQuery 脚本。
-
是的，抱歉，没注意。无论如何，现在一切都在那里。
-
这个演示对我来说似乎很好用。
标签： jquery angularjs forms jquery-validate