AngularJS空表单验证虫子 [英] AngularJS empty form validation bugs out
本文介绍了AngularJS空表单验证虫子的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这种形式，其中需要通过用户的输入将要从形式传递到控制器，然后PHP数据库内出版。
当我点击提交，并输入为空，则假语句的作品，但是如果我输入的输入内，然后手动清空它们，数据仍然插，即使它是空（返回真正）。
HTML code：
＆LT; DIV ID =容器＆GT;
＆lt;节NG控制器=mapController＆GT;
＆LT; H1＆GT;联系我们＆LT; / H1＆GT;
＆LT; BR＆GT;
＆LT; H2＆GT;如果你想与我们联系有关价格信息，请填写下面的表格。 ＆LT; / H＆GT;
＆LT; BR＆GT;
＆LT;窗体类=表单组ID =customFormsNG控制器=getContactsCtrl＆GT;
＆LT;标签＆gt;电子邮件和LT; /标签＆gt;
＆LT;输入ID =customFormsInput级=表格控NG模型=contact.emailTYPE =电子邮件占位符=电子邮件到这里要求/＆GT;
＆LT; BR＆GT;
＆LT;标签＆gt;手机号码＆LT; /标签＆gt;
＆LT;输入ID =customFormsInput级=表格控NG模型=contact.mobile类型=数字占位符=您的号码放在这里要求/＆GT;
＆LT; BR＆GT;
＆LT;标签＆gt;我们怎么可能是服务？ ＆LT; /标签＆gt;
＆LT; BR＆GT;
＆LT; textarea的行数=4COLS =100NG-模式=contact.text类型=文本占位符=在这里插入文本要求＆GT;
＆LT;！ - 用户文本 - ＆GT;
＆LT; / textarea的＆GT;
＆LT; BR＆GT;＆LT; BR＆GT;
＆LT;按钮类=BTN BTN-主要NG点击=newContact（接触）＆GT;提交＆LT; /按钮＆GT;
＆LT; BR＆GT; ＆LT; BR＆GT;＆LT; P＆GT; {{queryMsg}}＆下; / P＆GT;
＆LT; /表及GT;
＆LT; H2＆GT;您也可以访问我们的网站在智能城市，我们沙尔拉premises。 ＆LT; / H＆GT;
＆LT; BR＆GT;
＆LT; DIV ID =GoogleMap的风格=宽度：500像素，高度：380px;＆GT;＆LT; / DIV＆GT;
＆LT; BR＆GT;＆LT; BR＆GT;
＆LT; /节＆gt;
＆LT; / DIV＆GT;
AngularJS控制器：
app.controller（'getContactsCtrl'，['$范围，$ HTTP'，函数（$范围，$ HTTP）
{
$ scope.newContact =功能（接触）{
的console.log（接触）;
$ scope.queryMsg =; //显示如果发送或不在HTML表单
//后用于创建
$ http.post（'模型/ addContact.php'，触点）.success（功能（数据）{
如果（数据＆安培;＆安培;联系！= NULL）
{//插入行
$ scope.queryMsg =查询已成功发送。
的console.log（查询数据库中收到）;
$ scope.contact =; //明文后再提交是pressed
}
其他
{
$ scope.queryMsg =我们无法在这个时候获取您的查询。
的console.log（查询没有收到）;
}
}）
};
}
]）;
PHP code：
＆LT; PHP
$数据= json_de code（的file_get_contents（PHP：//输入））; $电子邮件= $数据 - ＆GT;电子邮件;
$移动= $数据 - ＆GT;移动;
$文字= $数据 - ＆gt;文字; require_once（connection.php）; $连接= connectToMySQL（）;
$查询=INSERT INTO tbl_contactus（电子邮件，移动，文本）VALUES（'$电子邮件，$移动，$文字'）;
$结果= mysqli_query（$连接，$查询）
或死亡（错误查询mysqli_error（$连接）。）; 如果（mysqli_affected_rows（$连接）大于0）{
$成功= TRUE;
}其他{
$成功= FALSE;
} 回声json_en code（$成功）;
？＆GT;
解决方案
应用变化如下尝试：
添加名称=customForms为您的形式和改变你的表单提交如下按钮：
＆LT;窗体类=表单组NAME =customFormsID =customFormsNG控制器=getContactsCtrl＆GT;
＆LT;按钮类=BTN BTN-主要NG点击=newContact（customForms）＆GT;提交＆LT; /按钮＆GT;
更改您的控制器如下：
app.controller（'getContactsCtrl'，['$范围，$ HTTP'，函数（$范围，$ HTTP）{
$ scope.contact = {};
$ scope.newContact =功能（形式）{
如果（形式。$无效）
返回false;
的console.log（接触）;
$ scope.queryMsg =; //显示如果发送或不在HTML表单
//后用于创建
$ http.post（'模型/ addContact.php'，触点）.success（功能（数据）{
如果（数据＆安培;＆安培;联系！= NULL）{
//插入行
$ scope.queryMsg =查询已成功发送。
的console.log（查询数据库中收到）;
$ scope.contact =; //明文后再提交是pressed
}其他{
$ scope.queryMsg =我们无法在这个时候获取您的查询。
的console.log（查询没有收到）;
}
}）;
};
}]）;
I have this form where the input by the user need to be passed from the form, to the controller and then published inside the PHP database.
When I click submit, and the inputs are empty, the false statement works, however if i type inside the inputs and then empty them manually, the data is still inserted, even though it is null (returns true).
HTML Code:
<div id="container">
<section ng-controller="mapController">
<h1> Contact Us</h1>
<br>
<h2> If you wish to contact us about prices and information, kindly fill in the form below. </h2>
<br>
<form class="form-group" id="customForms" ng-controller="getContactsCtrl">
<label> E-mail </label>
<input id="customFormsInput" class="form-control" ng-model="contact.email" type="email" placeholder="E-mail goes here" required/>
<br>
<label> Mobile Number </label>
<input id="customFormsInput" class="form-control" ng-model="contact.mobile" type="number" placeholder="Your number goes here" required/>
<br>
<label> How may we be of service? </label>
<br>
<textarea rows="4" cols="100" ng-model="contact.text" type="text" placeholder="Insert text here" required>
<!-- User text -->
</textarea>
<br><br>
<button class="btn btn-primary" ng-click="newContact(contact)"> Submit </button>
<br> <br><p> {{queryMsg}} </p>
</form>
<h2> You can also visit us at our premises at Smart City, Xghajra. </h2>
<br>
<div id="googleMap" style="width:500px;height:380px;"></div>
<br><br>
</section>
</div>
AngularJS controller:
app.controller('getContactsCtrl', ['$scope', '$http', function($scope, $http)
{
$scope.newContact = function(contact) {
console.log(contact);
$scope.queryMsg= ""; //displays if sent or not in html form
//post is used to create
$http.post('model/addContact.php', contact).success(function(data) {
if (data && contact != null)
{//row inserted
$scope.queryMsg = "Query has been sent successfully.";
console.log("Query received in DB");
$scope.contact=""; //clear text again after submit is pressed
}
else
{
$scope.queryMsg = "We were unable to fetch your query at this time.";
console.log("Query not received");
}
})
};
}
]);
PHP Code:
<?php
$data = json_decode(file_get_contents("php://input"));
$email = $data->email;
$mobile = $data->mobile;
$text = $data->text;
require_once("connection.php");
$connection = connectToMySQL();
$query = "INSERT INTO tbl_contactus (email, mobile, text) VALUES ('$email', '$mobile', '$text')";
$result = mysqli_query($connection, $query)
or die("Error in query: ". mysqli_error($connection));
if(mysqli_affected_rows($connection) > 0){
$success = true;
}else{
$success = false;
}
echo json_encode($success);
?>
解决方案
Try by applying below changes:
Add name="customForms" for your form and change your form submit button as below :
<form class="form-group" name="customForms" id="customForms" ng-controller="getContactsCtrl">
<button class="btn btn-primary" ng-click="newContact(customForms)"> Submit </button>
Change your controller as below :
app.controller('getContactsCtrl', ['$scope', '$http', function ($scope, $http){
$scope.contact = {};
$scope.newContact = function (form) {
if (form.$invalid)
return false;
console.log(contact);
$scope.queryMsg = ""; //displays if sent or not in html form
//post is used to create
$http.post('model/addContact.php', contact).success(function (data) {
if (data && contact != null) {
//row inserted
$scope.queryMsg = "Query has been sent successfully.";
console.log("Query received in DB");
$scope.contact = ""; //clear text again after submit is pressed
} else {
$scope.queryMsg = "We were unable to fetch your query at this time.";
console.log("Query not received");
}
});
};
}]);
这篇关于AngularJS空表单验证虫子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
