2017-04-06 159 views
0

我想啓用提交按鈕,如果所有的字段填入正確的模式,但它不工作。我試圖在每個函數的變量中存儲返回值,但沒有做出任何更改,所有驗證都運行良好,但禁用的提交按鈕未啓用。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>

+0

嗨,看看這個答案:http://stackoverflow.com/questions/18907198/jquery-make-sure-all-form-fields-are-filled和除了接受的答案我會控制您的表單中的每個提交值,每當用戶輸入字段的東西。如果一切正常。然後啓用該按鈕。 – 2017-04-06 07:04:03

+0

而不是從keyup事件處理函數內部返回一個值,您需要調用一個函數,傳遞您想要返回的值。 – Shilly

+0

在你的Jquery方法'Val_en()'方法有一些語法問題,我猜你錯誤地添加了大括號。由於這可能是它不工作。我編輯了Js的代碼部分。現在檢查。希望這可以幫助。 – RajeshKdev

回答

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; 
} 

我們可以重新安排所有關鍵up功能和獨立的。那麼它應該工作。

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 

}

希望它有助於 感謝

+0

感謝您的建議,但它不起作用 –