我有这个表单，我正在尝试验证它。当没有输入时，它应该抛出消息"这是必需的"，并禁用提交按钮。它工作正常，如果输入字段为空，它会抛出错误消息。现在我所做的是将这些表单字段数据保存到浏览器本地存储中，当用户再次尝试填写表单时，我将从本地存储中生成这些字段。但"这是必需的"消息仍然显示，即使在字段中预先填充了cookie后，按钮也被禁用。我该怎么解决这个问题？
</script>
<script src="angular.js"></script>
<script type="text/javascript">
function cookies(){
var fieldvalue = document.getElementById('rentname').value;
var fieldvalue1 = document.getElementById('rentphone').value;
var fieldvalue2 = document.getElementById('rentaddress').value;
localStorage.setItem('text',fieldvalue);
localStorage.setItem('text1',fieldvalue1);
localStorage.setItem('text2',fieldvalue2);
}
function load(){
var storedValue = localStorage.getItem('text');
var storedValue1 = localStorage.getItem('text1');
var storedValue2 = localStorage.getItem('text2');
if(storedValue){
document.getElementById('rentname').value = storedValue;
}
if(storedValue1){
document.getElementById('rentphone').value = storedValue1;
}
if(storedValue2){
document.getElementById('rentaddress').value = storedValue2;
}
}
</script>
</head>
<body onload="load()">
<div class="container">
<div class="row" style="padding-top:2rem;">
<div class="col-md-4">
<h2>Reserve Your Seat</h2>
</div>
</div>
<hr>
<form ng-app="rentalform" ng-controller="validateCtrl" method="post" id="rentalform" name="rentalform" action="rentinsertdb.php" novalidate>
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Full Name</label>
<div class="col-sm-8 tabular-border">
<input type="text" class="form-control" placeholder="Enter full name" name="rentname" id="rentname" ng-model="rentname" required>
<span style="color:red">
<span ng-show="!rentname.length">Name is required.</span>
</span>
</div>
</div>
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Choose your ride</label>
<div class="col-sm-8 tabular-border">
<div class="dropdown">
<select class="btn btn-default dropdown-toggle" name="rentcar" ng-model="rentcar" required>
<option value="" disabled selected>Choose your ride</option>
<option value="Toyota Alion 2008">Toyota Alion 2008</option>
<option value="Toyota Premio 2008">Toyota Premio 2008</option>
<option value="Toyota Corolla 2006">Toyota Corolla 2006</option>
<option value="Toyota Noah 2010">Toyota Noah 2010</option>
<span style="color:red" ng-show="rentalform.rentcar.$dirty && rentalform.rentcar.$invalid">
</select>
<span style="color:red">
<span ng-show="!rentcar.length">Please Select Your Car.</span>
</div>
</div>
</div>
<!-- <div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
<div class="col-sm-8 tabular-border">
<input type="text" class="form-control" id="focusedinput" placeholder="Enter phone number">
</div>
<div class="col-sm-2">
<p class="help-block"></p>
</div>
</div> -->
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
<div class="col-sm-8 tabular-border">
<input type="text" minlength="11" class="form-control" name="rentphone" placeholder="Enter phone number" ng-model="rentphone" id="rentphone" required>
<span style="color:red">
<span ng-show="!rentphone.length">Phone Number is Required.</span>
</div>
<div class="col-sm-2">
<p class="help-block"></p>
</div>
</div>
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Date</label>
<div class="col-sm-8 tabular-border">
<input type="date" class="form-control" id="focusedinput" placeholder="On Which date you would like to rent your ride?" name="rentdate" ng-model="rentdate" required>
<span style="color:red">
<span ng-show="!rentdate.length">Date is Required.</span>
</div>
<div class="col-sm-2">
<p class="help-block"></p>
</div>
</div>
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Profession</label>
<div class="col-sm-8 tabular-border">
<input type="text" class="form-control" id="focusedinput" placeholder="Enter Institution/Profession" name="rentprof">
</div>
<div class="col-sm-2">
<p class="help-block"></p>
</div>
</div>
<div class="form-group space">
<label for="txtarea1" class="col-sm-2 control-label">Pick up address</label>
<div class="col-sm-8 tabular-border"><textarea name="rentaddress" cols="50" rows="4" class="form-control" ng-model="rentaddress" placeholder="Enter Full Address; For example: House#38, Road 7/a, Dhanmondi, Dhaka-1205, Bangladesh" id="rentaddress" required></textarea>
</div>
<span style="color:red">
<span ng-show="!rentaddress.length">Address is Required.</span>
</div>
<div class="col-sm-8 col-sm-offset-2 space">
<button class="btn-primary btn" style="background-color:#03a9f4; border-color:#03a9f4;" id="submitrent" data-toggle="modal" data-target="#myModal" ng-disabled="rentalform.$invalid" onClick="cookies()"> Confirm </button>
</div>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Order Placed!</h4>
</div>
<div class="modal-body">
<p>Your Order Has Been Placed! We will call you shortly!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#submitrent").click( function() {
$.post( $("#rentalform").attr("action"),
$("#rentalform :input").serializeArray(),
function(info){ $("#result").html(info);
});
clearInput();
});
$("#rentalform").submit(function() {
return false;
});
function clearInput() {
$("#rentalform :input").each( function() {
$(this).val('');
});
}
</script>
<script>
var app = angular.module('rentalform', []);
app.controller('validateCtrl', function($scope) {
});
为什么不利用angulars处理表单的能力呢。你可以试试这个。
Plunker：http://plnkr.co/edit/sQWL0QPFNNsmVh4bXMUH?p=preview
HTML
<body ng-controller="MainCtrl">
<form name="myForm" novalidate>
<label>* First Name</label>
<input name="firstName" class="input-text" type="text" data-ng-model="user.firstName" required data-ng-class="{'required-error':nameError}">
<div data-ng-if="nameError" class="error-msg">First Name is Required</div>
<br/>
<input data-ng-click="submit()" type="submit" value="Submit">
<button data-ng-click="loadLocalData()">Load Local Data</button>
</form>
</body>
JS
app.controller('MainCtrl', function($scope) {
$scope.user = {
firstName: '',
lastName: ''
};
$scope.nameError = false;
localStorage.setItem('firstName', 'Harsh');
$scope.submit = function() {
if ($scope.myForm.firstName.$valid) {
$scope.nameError = false;
// make request here
} else {
$scope.nameError = true;
}
};
$scope.loadLocalData = function() {
$scope.user.firstName = localStorage.getItem('firstName');
$scope.nameError = false;
$scope.myForm.$setPristine();
};
});
解释
- 将name属性添加到表单并添加novalidate（将阻止默认验证）
- AngularJS将在作用域上创建一个具有表单名称的对象（此处为$scope.myForm）
- 为输入添加name属性（将创建名称为$scope.myForm.firstName的对象）
- 提交时进行验证并检查所需字段
- 重置错误变量并在重置或加载本地数据时将表单设置为原始（如果需要）
- 阅读angularjs文档了解更多信息https://docs.angularjs.org/guide/forms
您正在Angular范围外更新字段，因此必须告诉Angular您已更新了它。要么强制执行$Scope.apply（），要么使用Angular范围内的LocalStorage更新字段。