2017-02-24 62 views
0

我正在使用表單,但我的表單在我按下提交時不工作。我正在嘗試評估表單的部分是否爲空,電子郵件以及用戶標識的位數。當我按提交沒有發生任何事情,我一直這樣卡住。僅供參考我必須使用普通的js和html。Javascript代碼不會在我的表單上工作

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Student Login Form</title> 
    <link rel='stylesheet' href='studentform.css' type='text/css' /> 
    <script src="studentform.js"></script> 
</head> 
<body onload="document.form.studentid.focus();"> 
    <h1>Student Login</h1> 
    <div class="container"> 
     <form name="form" onsubmit="return validate();"> 
     <label for="studentid">Student ID:</label> 
     <input type="number" name="studentid" maxlength="8" id="studentid" required /> 

     <label for="name">Name:</label> 
     <input type="text" name="name" size="50" id="name" required /> 

     <label for="email">Email:</label> 
     <input type="email" name="email" size="50" id="email" required /> 

     <label for="emailconfirm">Email Confirmation:</label> 
     <input type="checkbox" name="emailconfirm" checked /><span>Send an email confirmation</span> 

     <select> 
     <option selected>Student Registration</option> 
     <option>Transcript</option> 
     </select> 

     <input type="submit" name="submit" value="Submit" /> 
    </form> 
</div> 

`

的js。

function validate(){ 
    var studentid = document.getElementById("studentid").value; 
    var name = document.getElementById("name").value; 
    var email = document.getElementById("email").value; 
    if(nameEmpty(name)) 
    { 
    if(studentidEmpty(studentid)) 
    { 
    if(emailEmpty(email)) 
    { 
    if(digitCheck(studentid)) 
    { 
    if checkEmail(email) 
    { 
    verify(name, studentid) 
    } 
    } 
    } 
    } 
    } 
    return false; 
    } 

function studentidEmpty(studentid){ 
    if (studentid == ""){ 
    alert("Please provide your student id!"); 
    studentid.focus(); 
    return false; 
    } 
} 

function nameEmpty(name){ 
if (name == ""){ 
    alert("Please provide your name!"); 
    name.focus() ; 
    return false; 
} 
} 

function emailEmpty(email){ 
if(email == ""){ 
    alert("Please provide your email!"); 
    email.focus(); 
    return false; 
} 

function digitCheck(studentid){ 
    var ok = studentid.search(".{8,}"); 
    if (ok!=0){ 
    alert("Please provide ID with 8 digits."); 
    return false; 
    } 
} 

function checkEmail(email) { 
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
    if (!filter.test(email.value)) { 
     alert('Please provide a valid email address'); 
     email.focus; 
     return false; 
} 
} 

function verify(name, studentid){ 
    var personList = [["Joe",11111111],["Tammy",22222222],["Jones",33333333]]; 
    for (list in personList) { 
    if (name in list && studentid in list){ 
     alert("Welcome! An email verification with be sent soon."); 
     return true; 
    } else{ 
     alert("Student Name and/or ID not found in records"); 
     return false; 
    } 
} 
} 
} 
+0

你可以發佈完整的HTML,甚至可以使用JSFiddle或Codepen的例子來更好地解決你的問題。 –

+0

對不起格式錯誤http://codebins.com/bin/4ldqoqb/latest – holaworld

+0

更改'if checkEmail(email)'爲'if(checkEmail(email))' – Nadim

回答

0

驗證函數總是返回false!它不應該。

function validate(){ 
    var studentid = document.getElementById("studentid").value; 
    var name = document.getElementById("name").value; 
    var email = document.getElementById("email").value; 
    return nameEmpty(name) && studentidEmpty(studentid) && emailEmpty(email) && digitCheck(studentid) && checkEmail(email) && verify(name, studentid); 
} 

然後確保你的形式看起來像:

<form name="form" onsubmit="return validate();" action="javascript:void(0)"> 
</form> 

而且你的自動對焦輸入的樣子:

<input type="number" name="studentid" maxlength="8" id="studentid" required autofocus/> 
+0

這些變化仍然不讓我顯示警告顯示驗證錯誤 – holaworld

1

我想你應該可以解決這一行:

if checkEmail(email) 

if (checkEmail(email)) 

您忘記了括號。

編輯:

我已經完全固定的代碼。你的錯誤:

  • 你忘了添加else子句對你的領域跳棋,他們只返回false如果驗證失敗
  • 你的檢查:「如果數組包含值」是錯誤的,我加入了從方法here
  • 你試圖把重點放在值,而不是標籤
  • 你正試圖從「價值的價值」測試電子郵件值不是「價值」

function validate() { 
 
\t var studentid = document.getElementById("studentid").value; 
 
\t var name = document.getElementById("name").value; 
 
\t var email = document.getElementById("email").value; 
 
\t if (nameEmpty(name)) { 
 
\t \t if (studentidEmpty(studentid)) { 
 
\t \t \t if (emailEmpty(email)) { 
 
\t \t \t \t if (digitCheck(studentid)) { 
 
\t \t \t \t \t if (checkEmail(email)) { 
 
\t \t \t \t \t \t return verify(name, studentid); 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
\t return false; 
 
} 
 

 
function studentidEmpty(studentid) { 
 
\t if (studentid == "") { 
 
\t \t alert("Please provide your student id!"); 
 
\t \t document.getElementById("studentid").focus(); 
 
\t \t return false; 
 
\t } else { 
 
    return true; 
 
    } 
 
} 
 

 
function nameEmpty(name) { 
 
\t if (name == "") { 
 
\t \t alert("Please provide your name!"); 
 
\t \t document.getElementById("name").focus(); 
 
\t \t return false; 
 
\t } else { 
 
    return true; 
 
    } 
 
} 
 

 
function emailEmpty(email) { 
 
\t if (email == "") { 
 
\t \t alert("Please provide your email!"); 
 
\t \t document.getElementById("email").focus(); 
 
\t \t return false; 
 
\t } else { 
 
    return true; 
 
    } 
 
} 
 

 
\t function digitCheck(studentid) { 
 
\t \t var ok = studentid.search(".{8,}"); 
 
\t \t if (ok != 0) { 
 
\t \t \t alert("Please provide ID with 8 digits."); 
 
\t \t \t return false; 
 
\t \t } else { 
 
     return true; 
 
    } 
 
\t } 
 

 
\t function checkEmail(email) { 
 
\t \t var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
 
\t \t if (!filter.test(email)) { 
 
\t \t \t alert('Please provide a valid email address'); 
 
\t \t \t email.focus; 
 
\t \t \t return false; 
 
\t \t } else { 
 
     return true; 
 
    } 
 
\t } 
 

 
\t function verify(name, studentid) { 
 
\t \t var personList = [ 
 
\t \t \t ["Joe", 11111111], 
 
\t \t \t ["Tammy", 22222222], 
 
\t \t \t ["Jones", 33333333] 
 
\t \t ]; 
 
\t \t for (list in personList) { 
 
\t \t \t if (contains.call(list, name) && contains.call(list, studentid)) { 
 
\t \t \t \t alert("Welcome! An email verification with be sent soon."); 
 
\t \t \t \t return true; 
 
\t \t \t } 
 
\t \t } 
 
    alert("Student Name and/or ID not found in records"); 
 
\t \t return false; 
 
\t } 
 
    
 
    var contains = function(needle) { 
 
    // Per spec, the way to identify NaN is that it is not equal to itself 
 
    var findNaN = needle !== needle; 
 
    var indexOf; 
 

 
    if(!findNaN && typeof Array.prototype.indexOf === 'function') { 
 
     indexOf = Array.prototype.indexOf; 
 
    } else { 
 
     indexOf = function(needle) { 
 
      var i = -1, index = -1; 
 

 
      for(i = 0; i < this.length; i++) { 
 
       var item = this[i]; 
 

 
       if((findNaN && item !== item) || item === needle) { 
 
        index = i; 
 
        break; 
 
       } 
 
      } 
 

 
      return index; 
 
     }; 
 
    } 
 

 
    return indexOf.call(this, needle) > -1; 
 
};
<div> 
 
    <form> 
 
     <label for="name">Name:</label> 
 
     <input type="text" name="name" size="50" id="name" required /> 
 
     
 
     <label for="studentid">Student ID:</label> 
 
     <input type="number" name="studentid" maxlength="8" id="studentid" required /> 
 

 
     <label for="email">Email:</label> 
 
     <input type="email" name="email" size="50" id="email" required /> 
 

 
     <label for="emailconfirm">Email Confirmation:</label> 
 
     <input type="checkbox" name="emailconfirm" checked /><span>Send an email confirmation</span> 
 

 
     <select> 
 
     <option selected>Student Registration</option> 
 
     <option>Transcript</option> 
 
     </select> 
 

 
     <input onclick="return validate();" type="submit" name="submit" value="Submit" /> 
 
    </form> 
 
</div>

+0

我修正了我的錯誤,但它仍然沒有給我正確的提醒,所以我的js有錯誤。 – holaworld

+0

我剛剛明白你希望你的代碼被修復,邏輯屬於你。無論如何,我會盡力解決。 – webmaster

+0

請再次檢查,更新 – webmaster

0

你忘了括號。 開始和結束每個函數也是錯誤的,請嘗試使用下面的代碼和這些更正。

function validate() { 
    var studentid = document.getElementById("studentid").value; 
    var name = document.getElementById("name").value; 
    var email = document.getElementById("email").value; 
    if (nameEmpty(name)) { 
     if (studentidEmpty(studentid)) { 
      if (emailEmpty(email)) { 
       if (digitCheck(studentid)) { 
        if (checkEmail(email)) { 
         verify(name, studentid) 
        } 
       } 
      } 
     } 
    } 
    return false; 
} 

function studentidEmpty(studentid) { 
    if (studentid == "") { 
    alert("Please provide your student id!"); 
    studentid.focus(); 
    return false; 
    } 
} 

function nameEmpty(name) { 
    if (name == "") { 
    alert("Please provide your name!"); 
    name.focus(); 
    return false; 
    } 
} 

function emailEmpty(email) { 
    if (email == "") { 
    alert("Please provide your email!"); 
    email.focus(); 
    return false; 
    } 
} 

function digitCheck(studentid) { 
    var ok = studentid.search(".{8,}"); 
    if (ok != 0) { 
    alert("Please provide ID with 8 digits."); 
    return false; 
    } 
} 

function checkEmail(email) { 
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
    if (!filter.test(email.value)) { 
    alert('Please provide a valid email address'); 
    email.focus; 
    return false; 
    } 
} 

function verify(name, studentid) { 
    var personList = [ 
    ["Joe", 11111111], 
    ["Tammy", 22222222], 
    ["Jones", 33333333] 
    ]; 
    for (list in personList) { 
    if (name in list && studentid in list) { 
     alert("Welcome! An email verification with be sent soon."); 
     return true; 
    } else { 
     alert("Student Name and/or ID not found in records"); 
     return false; 
    } 
    } 
}