如果所有字段都以正确的模式填充,我想启用提交按钮,但它不起作用。我试图在每个函数的变量中存储返回值,但没有进行任何更改,所有验证都运行良好,但禁用的提交按钮不会启用。
我无法在变量中获得返回值。任何帮助都是相关的。这是我的代码:
$(document).ready(function(){
function Val_Fname()
{
$("#f_name").keyup(function(){
var fn = $(this).val();
if(fn.length<=0)
{
$(this).attr("Placeholder","Required Field");
$(this).attr("style","color:red;");
return 0;
}
else
{
var reg = /^[A-Za-z]+$/;
if(reg.test(fn))
{
$(this).attr("style","color:Black;");
return 1;
}
else
{
$(this).attr("style","color:red;");
return 0;
}
}
});
}
function Val_Mname()
{
$("#m_name").keyup(function(){
var mn = $(this).val();
if(mn.length<=0)
{
$(this).attr("Placeholder","Required Field");
$(this).attr("style","color:red;");
return 0;
}
else
{
var reg = /^[A-Za-z]+$/;
if(reg.test(mn))
{
$(this).attr("style","color:Black;");
return 1;
}
else
{
$(this).attr("style","color:red;");
return 0;
}
}
});
}
function Val_Lname()
{
$("#l_name").keyup(function(){
var ln = $(this).val();
if(ln.length<=0)
{
$(this).attr("Placeholder","Required Field");
$(this).attr("style","color:red;");
return 0;
}
else
{
var reg = /^[A-Za-z]+$/;
if(reg.test(ln))
{
$(this).attr("style","color:Black;");
return 1;
}
else
{
$(this).attr("style","color:red;");
return 0;
}
}
});
}
function Val_em()
{
$("#email").keyup(function(){
var em = $(this).val();
if(em.length<=0)
{
$(this).attr("placeholder","Email can not be blank");
$(this).attr("style","color:red;");
return 0;
}
else
{
var reg = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
if(reg.test(em))
{
$(this).attr("style","color:Black;");
return 1;
}
else
{
$(this).attr("style","color:red;");
return 0;
}
}
});
}
function Val_en()
{
$("#enroll").keyup(function(){
var enroll = $(this).val();
if(enroll.length<=0)
{
$(this).attr("placeholder","Enrollment can not be blank");
$(this).attr("style","color:red;");
return 0;
}
else if(enroll.length>12 || enroll.length<12) {
$(this).attr("style","color:red;");
return 0;
}
else if(enroll.length= =12)
{
var reg=/^[0-9][0-9]{11}$/;
if(reg.test(enroll))
{
$(this).attr("style","color:Black;");
return 1;
}
else
{
$(this).attr("style","color:red;");
return 0;
}
});
}
function Val_mb()
{
$("#mobile").keyup(function(){
var mob=$(this).val();
if(mob.length<=0)
{
$(this).attr("placeholder","Mobile Number can not be blank");
$(this).attr("style","color:red;");
return 0;
}
else if(mob.length>10 || mob.length<10)
{
$(this).attr("style","color:red;");
return 0;
}
else if(mob.length==10)
{
var reg = /^[0-9][0-9]{9}$/;
if(reg.test(mob))
{
$(this).attr("style","color:Black;");
return 1;
}
else
{
$(this).attr("style","color:red;");
return 0;
}
}
});
}
function submitbutton()
{
var z = Val_Fname();
var y = Val_Mname();
var x = Val_Lname();
var w = Val_em();
var v = Val_en();
var u = Val_mb();
if(z==1 && y==1 && x==1 && w==1 && v==1 && u==1)
{
$("#subs_btn").attr("disabled",false);
$("#subs_btn").attr("style","background:rgba(0, 186, 107, 0.71);");
}
else
{
$("#subs_btn").attr("disabled",true);
$("#subs_btn").attr("style","background:grey;");
}
}
submitbutton();
$("#subs_btn").click(function(){
$("#reg_form").submit();
});
});
form
{
display:block;
width:35%;
margin:10em auto;
text-align:center;
box-shadow:0px 4px 8px #818080;
background:#eee;
border-top-right-radius:7px;
border-top-left-radius:7px;
font-family:calibri;
padding:1em;
overflow:hidden;
}
form input[type="button"]
{
width: 66.2%;
padding: .7em;
background: rgba(0, 186, 107, 0.71);
border: none;
color: #fefefe;
cursor: pointer;
margin-top: 1em;
font-size: 1.2em;
text-shadow:0px 0px 10px black;
}
form input[type="reset"]
{
width:20%;
padding: .7em;
background: rgba(89, 93, 91, 0.7);
border: none;
color: #fefefe;
cursor: pointer;
margin-top: 1em;
font-size: 1.2em;
text-shadow:0px 0px 10px black;
}
form input[type="text"]
{
margin:.3em;
width:40%;
padding:.3em;
}
form h4
{
display:block;
background:#757575;
margin:-.8em;
margin-bottom:0.6em;
padding:.7em;
font-size:1.5em;
color:#fffcfc;
text-shadow:0px 0px 10px black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>JS Form Validation</title>
</head>
<body>
<form method="get" id="reg_form">
<h4>Student Registration Form</h4>
<input type="text" name="f_name" id="f_name" placeholder="First Name">
<input type="text" name="m_name" id="m_name" placeholder="Middle Name">
<input type="text" name="l_name" id="l_name" placeholder="Last Name">
<input type="text" name="email" id="email" placeholder="Email">
<input type="text" name="enroll" id="enroll" placeholder="Enrollment No">
<input type="text" name="mobile" id="mobile" placeholder="Mobile">
<input type="button" id="subs_btn" value="Subscribe">
<input type="Reset" name="Reset" id="Reset" value="Reset">
</form>
</body>
</html>
答案 0 :(得分:0)
我添加了评论,但它不适合该区域。
所以这就是你现在遇到的问题。
function Val_mb()
{
$("#mobile").keyup(function(){
var mob = $(this).val();
if(mob.length<=0)
每次按下按钮时,代码的这一部分都需要调用函数和键盘触发器。所以让我们分开吧。而不是像这样使用fucntion Val_mb()
。
在“文档就绪部分”中定义此全局变量,然后删除上面的部分。
$( “#移动”)。KEYUP(函数(){ 如果(一切都好){ 将全局变量设置为true或false } }
这是你的功能
function Val_mb(){
return that global variable;
}
我们可以重新安排所有按键功能和分离。它应该工作。
document ready {
var elementOneBooleanIdentifier = false;
var elementTwoBooleanIdentifier = false;
var elementThreeBooleanIdentifier = false;
var elementFourBooleanIdentifier = false;
$("elementOneidentifier").keyup(function(){
if (element 1 have the right values)
set its boolean identifier to true or false;
});
$("elementTwoidentifier").keyup(function(){
if (element 2 have the right values)
set its boolean identifier to true or false;
});
$("elementThreeidentifier").keyup(function(){
if (element 3 have the right values)
set its boolean identifier to true or false;
});
$("elementFouridentifier").keyup(function(){
if (element 4 have the right values)
set its boolean identifier to true or false;
});
functions goes here..
return that elements boolean identifiers
}
希望它有所帮助 感谢