我最近使用AngularJS将我的网站升级为单页面应用程序配置。从那以后我无法使用jQuery form validation plugin。我已经包含了所有需要的文件并检查了路径是否正确，但似乎是在浏览器中进行验证，而不是在我的代码中进行。
应用程序分为几个HTML文件，这些文件被动态注入index.html。我包含所需文件的顺序是：
CSS个文件都加载到Head，然后是一些代码，包括<div ng-view></div>。
/*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的开头，但无论我尝试什么，浏览器都是验证我的表单的唯一方法。
请告知
答案 0 :(得分：7)
我在AngularJS和jQuery Validation Plugin之间创建了一个桥梁。它使用单个指令ng-validate验证表单，该指令自动检测DOM何时就绪。
试一试：https://github.com/jpkleemans/angular-validate。反馈非常感谢！
答案 1 :(得分：0)
我不确定你的困难是什么。我复制了你的代码片段并将验证代码添加到它，它似乎完全像你想要的那样工作。
/*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 -->
将jquery，然后是jquery.validate，然后是jquery.form，然后是bootstrap，然后是你的验证代码。如果要强制它们按顺序加载，请将jquery，jquery.validate，jquery.form和bootstrap放在<head>中。这将按顺序加载它们，但在完成加载之前不会呈现HTML，这会减慢页面加载时间。自定义验证代码应该放在<body>中，但由于它包含在jQuery的document.ready函数（$(function () {...});中，因此它取决于您自己。{{1}} ）。
答案 2 :(得分：0)
i thought you can refer this link for your reference which is used jquery.validate.js plugin in angularjs application https://codepen.io/kalaiselvan/pen/PzBNBY
enter link description here //form validation using Angularjs and jquery.validate.js with ui.bootstrap and ui.utils
var app=angular.module('formvalid', ['ui.bootstrap','ui.utils']);
app.controller('validationCtrl',function($scope){
$scope.validationOpt = {
rules: {
name: {
required: true,
minlength: 3
},
urlfield: {
required: true,
minlength: 3,
url: true
},dropdown:{
required:{
depends: function(element) {
return $("#dropdown").val() == '';
}
}
},'test[]': {
required: true,
minlength:2
},
namecallback:{
required:true,
callBackFunction:function(value,element){
//business logic functions
}
}
},
messages: {
'test[]': {
required: "You must check at least 1 box",
maxlength: "Check no more than {0} boxes",
minlength:"Pleace check {0} boxes"
}
},
submitHandler : function() {
$("#formid").validate().resetForm();
$('#formid')[0].reset();
//for multipart
/* $http({
method : 'POST',
url : '',
headers : {
'Content-Type' : undefined
},
data : formData,
transformRequest : function(data, headersGetterFunction) {
return data;
}
}).success(function(response) {
msg = response.data;
type = "success";
}).error(function(response) {
msg = response.data;
type = "error"
});*/
}
};
$scope.data=[{id:1,name:"One"},{id:2,name:"two"}, {id:3,name:"three"}];
$scope.formsubmit=function(){
//alert("hai");
}
});
<div class="container" ng-app="formvalid">
<div class="panel" data-ng-controller="validationCtrl">
<div class="panel-heading border">
<h2>Form validation using Angularjs and jquery.validate</h2>
</div>
<div class="panel-body">
<form id="formid" role="form" ui-jq="validate" ui-options="validationOpt" ng-submit="formsubmit()">
<div class="form-group mb25">
<p> drop down box validation with </p>
<div>
<select class="form-control" name="dropdown" ng-model="dropdown" id="dropdown">
<option value="">-Select-</option>
<option ng-repeat="i in data" value="{{i.id}}">{{i.name}}</option>
</select>
</div>
</div>
<div class="form-group mb25">
<p> check box validations</p>
<div>
<input type="checkbox" name="test[]" />x
<input type="checkbox" name="test[]" />y
<input type="checkbox" name="test[]" />z
</div>
</div>
<div class="form-group mb25">
<p>Required | minimum length 3 characters</p>
<div>
<input type="text" class="form-control" name="namecallback" placeholder="Required | minimum length 3 characters">
</div>
</div>
<div class="form-group mb25">
<p>Required | valid email format</p>
<div>
<input type="email" class="form-control" name="email" placeholder="Required | valid email format" required>
</div>
</div>
<div class="form-group mb25">
<p>Required | valid url format</p>
<div>
<input type="url" class="form-control" name="url" placeholder="Required | valid url format" required>
</div>
</div>
<div class="form-group mb25">
<p>Required | number</p>
<div>
<input type="number" class="form-control" name="number" placeholder="Required | number" required>
</div>
</div>
<div class="form-group mb25">
<p>Required | number | min 10</p>
<div>
<input type="number" min="10" class="form-control" name="number-min" placeholder="Required | number | min 10" required>
</div>
</div>
<div class="form-group mb25">
<p>Required | number | max 10</p>
<div>
<input type="number" max="10" class="form-control" name="number-max" placeholder="Required | number | max 10" required>
</div>
</div>
<div class="form-group mb25">
<p>Required | number | min 0 | max 100</p>
<div>
<input type="number" min="0" max="100" class="form-control" name="number-num" placeholder="Required | number | min 0 | max 100" required>
</div>
</div>
<div class="form-group">
<label></label>
<div>
<button class="btn btn-primary mr10">Submit</button>
<button class="btn btn-default">Reset</button>
</div>
</div>
</form>