验证表单不起作用 - 表单和验证
Posted
技术标签:
【中文标题】验证表单不起作用 - 表单和验证【英文标题】：Validate Form not working - form and validation 【发布时间】：2021-12-01 07:38:05 【问题描述】：$(function()
$("#submit").click(function()
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
var phone = $("#phone").val();
var email = $("#email").val();
var ans = true;
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf(".");
if(first_name === "")
window.alert("لا يمكنك ترك خانةالاسم فارغة");
$("#first_name").addClass("WrongInp");
ans = false;
else
$("#first_name").removeClass("WrongInp");
if(last_name === "")
window.alert("لا يمكنك ترك خانةاسم العائلة فارغة");
$("#last_name").addClass("WrongInp");
ans = false;
else
$("#last_name").removeClass("WrongInp");
if(phone.value === "")
window.alert("لا يمكنك ترك خانةالهاتف فارغة");
$("#phone").addClass("WrongInp");
ans = false;
else
$("#phone").removeClass("WrongInp");
if(phone.length < 9 || phone.length > 14)
window.alert("ادخل رقم هاتف صحيح");
$("#phone").addClass("WrongInp");
ans = false;
else
$("#phone").removeClass("WrongInp");
if (email === '')
alert('الرجاء ادخال البريد الالكتروني');
return false;
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length)
alert("البريد الالكتروني غير صحيح");
return false;
if(ans === true)
var url = 'Cant Reveal';
var form = new FormData();
form.append("first_name", $('#first_name').val());
form.append("last_name", $('#last_name').val());
form.append("phone", $('#phone').val());
form.append("email", $('#email').val());
form.append("status", "new");
var settings =
"url": "cant Reveal",
"method": "POST",
"timeout": 0,
"headers":
"Authorization": "Cant Reveal"
,
"processData": false,
"mimeType": "multipart/form-data",
"contentType": false,
"data": form
;
$.ajax(settings).done(function (response)
window.location.href = "www.google.com";
);
return false;
);
);<form id="myForm">
<input name="first_name" id="first_name" class="input" type="text" placeholder="الاسم الكامل" required />
<input name="phone" id="phone" minlength="8" maxlength="15" class="input" type="text" placeholder="الجوال" required />
<input name="email" id="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]2," class="input" type="text" placeholder="البريد الالكتروني" required />
<button type="text" class="submit">submit</button>
<input type="hidden" name="last_name" id="last_name" value="LN">
</form>我认为我在 javascript 中进行了更改， 首先我验证表格，然后用 ans 提交 ans 必须为真 如果其中一个字段为空或电话和电子邮件与我的验证不匹配，如果变为 false 并且不继续
在 javascript 部分中提出的任何建议 或者我可以删除这个部分并写另一个更好的......
【问题讨论】：
【参考方案1】：click 处理程序不起作用，因为您将其绑定到 ID 为 submit - $("#submit") 的 html 元素。
在提供的 HTML 中，您使用的是 submit 类，而不是 id。
<button type="text" class="submit">submit</button>
要使处理程序工作更改此行：
$("#submit").click(function()
到这个
$(".submit").click(function()
另一种选择是在 HTML 中使用 id 而不是 class
<button type="text" id="submit">submit</button>
在 javascript 部分中提出的任何建议，或者我可以删除此部分并编写另一个更好的部分......
如果你是初学者，完全没问题。如果你想让它更简洁（因为你使用的是 jQuery），我建议你看看这个插件，比如 - jquery-validation
【讨论】：
太棒了，谢谢【参考方案2】：试一试。
$(document).ready(function()
$("#submit").click(function()
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
var phone = $("#phone").val();
var email = $("#email").val();
var ans = true;
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf(".");
if(first_name === "")
window.alert("لا يمكنك ترك خانةالاسم فارغة");
$("#first_name").addClass("WrongInp");
ans = false;
else
$("#first_name").removeClass("WrongInp");
if(last_name === "")
window.alert("لا يمكنك ترك خانةاسم العائلة فارغة");
$("#last_name").addClass("WrongInp");
ans = false;
else
$("#last_name").removeClass("WrongInp");
if(phone.value === "")
window.alert("لا يمكنك ترك خانةالهاتف فارغة");
$("#phone").addClass("WrongInp");
ans = false;
else
$("#phone").removeClass("WrongInp");
if(phone.length < 9 || phone.length > 14)
window.alert("ادخل رقم هاتف صحيح");
$("#phone").addClass("WrongInp");
ans = false;
else
$("#phone").removeClass("WrongInp");
if (email === '')
alert('الرجاء ادخال البريد الالكتروني');
return false;
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length)
alert("البريد الالكتروني غير صحيح");
return false;
if(ans === true)
var url = 'Cant Reveal';
var form = new FormData();
form.append("first_name", $('#first_name').val());
form.append("last_name", $('#last_name').val());
form.append("phone", $('#phone').val());
form.append("email", $('#email').val());
form.append("status", "new");
var settings =
"url": "cant Reveal",
"method": "POST",
"timeout": 0,
"headers":
"Authorization": "Cant Reveal"
,
"processData": false,
"mimeType": "multipart/form-data",
"contentType": false,
"data": form
;
$.ajax(settings).done(function (response)
window.location.href = "www.google.com";
);
return false;
);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<input name="first_name" id="first_name" class="input" type="text" placeholder="الاسم الكامل" required />
<input name="phone" id="phone" minlength="8" maxlength="15" class="input" type="text" placeholder="الجوال" required />
<input name="email" id="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]2," class="input" type="text" placeholder="البريد الالكتروني" required />
<button type="text" class="submit">submit</button>
<input type="hidden" name="last_name" id="last_name" value="LN">
</form>【讨论】：
以上是关于验证表单不起作用 - 表单和验证的主要内容，如果未能解决你的问题，请参考以下文章