我想啓用提交按鈕,如果所有的字段填入正確的模式,但它不工作。我試圖在每個函數的變量中存儲返回值,但沒有做出任何更改,所有驗證都運行良好,但禁用的提交按鈕未啓用。JavaScript函數不返回任何值
我不能讓一個變量返回的值。任何幫助都是有好處的。這裏是我的代碼:
$(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
{
\t display:block;
\t width:35%;
\t margin:10em auto;
\t text-align:center;
\t box-shadow:0px 4px 8px #818080;
\t background:#eee;
\t border-top-right-radius:7px;
\t border-top-left-radius:7px;
\t font-family:calibri;
\t padding:1em;
\t overflow:hidden;
}
form input[type="button"]
{
\t width: 66.2%;
\t padding: .7em;
\t background: rgba(0, 186, 107, 0.71);
\t border: none;
\t color: #fefefe;
\t cursor: pointer;
\t margin-top: 1em;
\t font-size: 1.2em;
\t text-shadow:0px 0px 10px black;
}
form input[type="reset"]
{
\t width:20%;
\t padding: .7em;
\t background: rgba(89, 93, 91, 0.7);
\t border: none;
\t color: #fefefe;
\t cursor: pointer;
\t margin-top: 1em;
\t font-size: 1.2em;
\t text-shadow:0px 0px 10px black;
}
form input[type="text"]
{
\t margin:.3em;
\t width:40%;
\t padding:.3em;
}
form h4
{
\t display:block;
\t background:#757575;
\t margin:-.8em;
\t margin-bottom:0.6em;
\t padding:.7em;
\t font-size:1.5em;
\t color:#fffcfc;
\t 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>
\t <form method="get" id="reg_form">
\t \t <h4>Student Registration Form</h4>
\t \t <input type="text" name="f_name" id="f_name" placeholder="First Name">
\t \t <input type="text" name="m_name" id="m_name" placeholder="Middle Name">
\t \t <input type="text" name="l_name" id="l_name" placeholder="Last Name">
\t \t <input type="text" name="email" id="email" placeholder="Email">
\t \t <input type="text" name="enroll" id="enroll" placeholder="Enrollment No">
\t \t <input type="text" name="mobile" id="mobile" placeholder="Mobile">
\t \t <input type="button" id="subs_btn" value="Subscribe">
\t \t <input type="Reset" name="Reset" id="Reset" value="Reset">
\t </form>
</body>
</html>
嗨,看看這個答案:http://stackoverflow.com/questions/18907198/jquery-make-sure-all-form-fields-are-filled和除了接受的答案我會控制您的表單中的每個提交值,每當用戶輸入字段的東西。如果一切正常。然後啓用該按鈕。 – 2017-04-06 07:04:03
而不是從keyup事件處理函數內部返回一個值,您需要調用一個函數,傳遞您想要返回的值。 – Shilly
在你的Jquery方法'Val_en()'方法有一些語法問題,我猜你錯誤地添加了大括號。由於這可能是它不工作。我編輯了Js的代碼部分。現在檢查。希望這可以幫助。 – RajeshKdev