JavaScript для формы проверка

Я пытаюсь сделать форму, которая проверяет эти требования:JavaScript для формы проверка

убеждается и поле «Полное имя» «Student ID» не является пустым
убеждается «E-mail адрес "поле содержит" @ ufv.ca ".

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
     <meta charset="utf-8" />  
     <meta name="description" content="Javascript Quiz"/> 
     <meta name="author" content="M.Bouguerra"/> 
     <meta name="keywords" content="Javascript, client side scripting"/> 
     <meta name="robots" content="index,folow,noarchive"/> 

     <link rel="icon" href="images/mylogo.ico"/> 

     <script type="text/javascript" src="scripts/script.js"> </script> 
     <title>Javascript</title> 

</head> 
<body onload="focus()"> 
<header> 
    <img id="logo" src="./images/javascript.jpg" alt="Javascript Logo" title="Javascript Logo" height="200"> 
<hgroup > 
    <h1>Javascript Overview</h1> 
<h2>Multiple Choice Quiz</h2> 
</hgroup> 

</header> 
<nav> 
    <ul id="menu"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="register.html">Register</a></li> 
     <li><a href="quiz.html">Start Quiz</a></li> 
     <li><a href="about.html">About</a></li> 
     <li><a href="contact.html">Contact</a></li> 
    </ul> 

</nav> 
    <br> 
<section > 
<article> 
<form action="quiz.html" id="register" method="get" > 
     <fieldset> 
     <legend>Registration Form</legend> 
     <ol> 
      <li class="input"> 
       <label >Full Name</label> 
       <input type="text" id="fullName" name="fullName" /> 
      </li> 
      <li class="input"> 
       <label >Student ID</label> 
       <input type="text" id="studentId" name="studentId" /> 
      </li> 
      <li class="input"> 
       <label >Email address</label> 
       <input type="text" id="email" name="email" /> 
      </li> 
      </ol> 
     <input type="submit" value="Start Quiz" onclick="validateRegistration()" /> 
    </fieldset> 
</form> 
    <br> 

</article> 
</section> 
    <br> 
    <br> 
<footer> 
&copy; 2016 M. Bouguerra 
</footer> 
</body> 
</html>

JavaScript:

//Function to make "Full name" form element highlighted 
function focus(){ 
    document.forms.register.fullName.focus(); 
} 


//Requirements for Form Values 
function validateRegistration(){ 
    if(document.forms.register.fullName.value==""){ 
     alert("You must enter your full name"); 
     return false; //WHY WE NEED THIS? 
    } 
    else if(document.forms.register.studentID.value==""){ 
    alert("You must provide student ID"); 
    return false; 
    } 
    else if(!document.forms.register.email.value.match(/[email protected]$/)){ 
     alert("You must provide a valid ufv email"); 
     return false; 
    } 
    return true; //what's this for? 
}

Когда Полное имя поля пусто, и я нажимаю «Старт викторина» для отправки формы предупреждения выскочит, чтобы сообщить пользователю для ввода их полного имени, но все же идет на страницу викторины, чего я не хочу, если требования к форме не выполняются.

Также кажется, что заявления для проверки полей Student ID и электронной почты вообще не работают.

источник

2016-02-29 Anonymous

Попробуйте сделать это, удалите '' action' и method' от формы и отправить форму в 'validateRegistration()' после выполнения проверки. – Himanshu

Итак, я бы добавил скрипт в функцию validateRegistration(), которая отправила бы форму? –

Точно! Таким образом, ваша форма представляется только в том случае, если она действительна. В текущем сценарии форма отправляется независимо от ее действительности. – Himanshu

вызов проверки onSubmit формы
Имя поля неправильно document.forms.register.studentID.value должно быть document.forms.register.studentId.value
Хранить сообщения об ошибках и отображение в одно предупреждение вместо проверки первого поля и возврата от проверки. который не сможет проверить другие поля.

//Function to make "Full name" form element highlighted 
 
function focus(){ 
 
    document.forms.register.fullName.focus(); 
 
} 
 

 

 
//Requirements for Form Values 
 
function validateRegistration(){ 
 
    var str = []; 
 
    if(document.forms.register.fullName.value==""){ 
 
     str.push("You must enter your full name"); 
 
    } 
 
    if(document.forms.register.studentId.value==""){ 
 
    str.push("You must provide student ID"); 
 
    } 
 
    if(!document.forms.register.email.value.match(/[email protected]$/)){ 
 
     str.push("You must provide a valid ufv email"); 
 
    } 
 
    if(str.length > 0) { 
 
    alert(str.join('\n')); 
 
    return false; 
 
    } else { return true; } 
 
}

<form action="quiz.html" id="register" method="get" onSubmit="return validateRegistration()" > 
 
     <fieldset> 
 
     <legend>Registration Form</legend> 
 
     <ol> 
 
      <li class="input"> 
 
       <label >Full Name</label> 
 
       <input type="text" id="fullName" name="fullName" /> 
 
      </li> 
 
      <li class="input"> 
 
       <label >Student ID</label> 
 
       <input type="text" id="studentId" name="studentId" /> 
 
      </li> 
 
      <li class="input"> 
 
       <label >Email address</label> 
 
       <input type="text" id="email" name="email" /> 
 
      </li> 
 
      </ol> 
 
     <input type="submit" value="Start Quiz" /> 
 
    </fieldset> 
 
</form>

источник

2016-02-29 10:02:22 Siva

Это решило мою проблему отлично, спасибо. –

JavaScript для формы проверка

ответ

Смежные вопросы