Member 13530900 Ответов: 1

Нужна помощь в отладке JS и HTML код

Hi, I have written a code for validating the form fields. The issues I am facing with the code is:

- Even after entering valid data, error message is still persisting. I want to remove the error messages as soon as I enter valid data

- In password field, after entering valid password also it is showing error message "Password is invalid"

- Here I have used "Button" instead of "Submit". When "Submit" is used , after clicking on "Submit" with fields leaving blank, the page is directed to the link I have used in the code. I need to correct my code such that when the user hits the Submit button all the error messages should be displayed to the user

Here is my code:

<!DOCTYPE html>
<html>
<head>
<title>PyExam Registration</title>
<meta charset="UTF-8">
<meta name= "content" description="This is what Google will show you">
<link rel="icon" href= "https://qsf.ec.quoracdn.net/-3-images.favicon.ico-26-1285e84414ca1091.ico" />
<script>
function validate() {
fn=document.registration.fn.value;
if ((fn.length=='0') || (/^[A-Za-z]+$/.test(fn) == false )){
if (fn.length=='0') {
document.getElementById("fn").innerHTML="First Name is mandatory";
document.getElementById("fn").style.color="red";
}
else {
document.getElementById("fn").innerHTML="First Name should contain alphabets only";
document.getElementById("fn").style.color="red";
}
}


ln=document.registration.ln.value;
if ((ln.length=='0') || (/^[A-Za-z]+$/.test(ln) == false )){
if (ln.length=='0') {
document.getElementById("ln").innerHTML="Last Name is mandatory";
document.getElementById("ln").style.color="red";
}
else {
document.getElementById("ln").innerHTML="Last Name should contain alphabets only";
document.getElementById("ln").style.color="red";
}
}

email=document.registration.email.value;
if ((email.length=='0') || (/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email) == false )){
if (email.length=='0') {
document.getElementById("email").innerHTML="Email id is mandatory";
document.getElementById("email").style.color="red";
}
else {
document.getElementById("email").innerHTML="Email id is invalid";
document.getElementById("email").style.color="red";
}
} 

ph=document.registration.ph.value;
if ((ph.length=='0') || (/^[0-9]{10}$/.test(ph) == false )){
if (ph.length=='0') {
document.getElementById("ph").innerHTML="Ph no is mandatory";
document.getElementById("ph").style.color="red";
}
else {
document.getElementById("ph").innerHTML="Ph no is invalid";
document.getElementById("ph").style.color="red";
}
} 

p1=document.registration.p1.value;
if ((p1.length=='0') || (/^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/.test(ph) == false )){
if (p1.length=='0') {
document.getElementById("p1").innerHTML="Password is mandatory";
document.getElementById("p1").style.color="red";
}
else {
document.getElementById("p1").innerHTML="Password is invalid";
document.getElementById("p1").style.color="red";
}
} 

p2=document.registration.p2.value;
if ((p2.length=='0') || (p1 != p2 )){
if (p2.length=='0') {
document.getElementById("p2").innerHTML="Please confirm password";
document.getElementById("p2").style.color="red";
}
else {
document.getElementById("p2").innerHTML="Password mismatch";
document.getElementById("p2").style.color="red";
}
} 

var lst=document.registration.gender;
for (i=0;i<lst.length;i++) {
if (lst[i].checked == true) {
break;
}
else {
document.getElementById("gender").innerHTML="Please select your gender";
document.getElementById("gender").style.color="red";
}
}

subjects=document.registration.subjects.value
if (subjects == "") {
document.getElementById("sub").innerHTML ="Please choose the subject";
document.getElementById("sub").style.color="red";
}
}


</script>
</head>
<center> 
<body>
<h1>  PyExam Registration </h1>
<form name="registration" action="https://www.indiabix.com/" onclick="validate()"> 
<table>
<tr> 
<td>First Name:</td> <td><input type="text" name="fn"/> <div id="fn"></div> </td>
</tr>
<tr>
<td>Last Name:</td> <td> <input type="text" name="ln"/> <div id="ln"></div> </td>
</tr>
<tr>
<td>Email Id:</td> <td> <input type="text" name="email"/> <div id="email"></div> </td>
</tr>
<tr>
<td>Phone No:</td> <td> <input type="text" name="ph"/> <div id="ph"></div> </td>
</tr>
<tr>
<td> <p1> Gender: </p1> </td> <td> 
<input type="radio" name="gender" value="male"/> Male
<input type="radio" name="gender" value="female"/> Female 
<div id="gender"></div> </td>
</tr>
<tr>
<td>Password:</td> <td><input type="text" name="p1"/> <div id="p1"></div> </td>
</tr>
<tr>
<td>Confirm Password:</td> <td><input type="text" name="p2"/> <div id="p2"></div> </td>
</tr>
<tr>
<td>Subjects:</td> <td> <select name="subjects"> 
<option value="">Default</option>
<option value="physics"> Physics</option>
<option value="chemistry">Chemistry </option>
<option value="biology">Biology </option>
<option value="cs">Computer Science </option>
</select> <div id="sub"> </div> </td> 
</tr>
<tr>
<td> </td> <td><input type="button" value="Submit"/> </td>
</tr>
</table>

</form> </center>

</body>
</html>


Что я уже пробовал:

Hi, I have written a code for validating the form fields. The issues I am facing with the code is:

- Even after entering valid data, error message is still persisting. I want to remove the error messages as soon as I enter valid data

- In password field, after entering valid password also it is showing error message "Password is invalid"

- Here I have used "Button" instead of "Submit". When "Submit" is used , after clicking on "Submit" with fields leaving blank, the page is directed to the link I have used in the code. I need to correct my code such that when the user hits the Submit button all the error messages should be displayed to the user

Here is my code:

<!DOCTYPE html>
<html>
<head>
<title>PyExam Registration</title>
<meta charset="UTF-8">
<meta name= "content" description="This is what Google will show you">
<link rel="icon" href= "https://qsf.ec.quoracdn.net/-3-images.favicon.ico-26-1285e84414ca1091.ico" />
<script>
function validate() {
fn=document.registration.fn.value;
if ((fn.length=='0') || (/^[A-Za-z]+$/.test(fn) == false )){
if (fn.length=='0') {
document.getElementById("fn").innerHTML="First Name is mandatory";
document.getElementById("fn").style.color="red";
}
else {
document.getElementById("fn").innerHTML="First Name should contain alphabets only";
document.getElementById("fn").style.color="red";
}
}


ln=document.registration.ln.value;
if ((ln.length=='0') || (/^[A-Za-z]+$/.test(ln) == false )){
if (ln.length=='0') {
document.getElementById("ln").innerHTML="Last Name is mandatory";
document.getElementById("ln").style.color="red";
}
else {
document.getElementById("ln").innerHTML="Last Name should contain alphabets only";
document.getElementById("ln").style.color="red";
}
}

email=document.registration.email.value;
if ((email.length=='0') || (/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email) == false )){
if (email.length=='0') {
document.getElementById("email").innerHTML="Email id is mandatory";
document.getElementById("email").style.color="red";
}
else {
document.getElementById("email").innerHTML="Email id is invalid";
document.getElementById("email").style.color="red";
}
} 

ph=document.registration.ph.value;
if ((ph.length=='0') || (/^[0-9]{10}$/.test(ph) == false )){
if (ph.length=='0') {
document.getElementById("ph").innerHTML="Ph no is mandatory";
document.getElementById("ph").style.color="red";
}
else {
document.getElementById("ph").innerHTML="Ph no is invalid";
document.getElementById("ph").style.color="red";
}
} 

p1=document.registration.p1.value;
if ((p1.length=='0') || (/^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/.test(ph) == false )){
if (p1.length=='0') {
document.getElementById("p1").innerHTML="Password is mandatory";
document.getElementById("p1").style.color="red";
}
else {
document.getElementById("p1").innerHTML="Password is invalid";
document.getElementById("p1").style.color="red";
}
} 

p2=document.registration.p2.value;
if ((p2.length=='0') || (p1 != p2 )){
if (p2.length=='0') {
document.getElementById("p2").innerHTML="Please confirm password";
document.getElementById("p2").style.color="red";
}
else {
document.getElementById("p2").innerHTML="Password mismatch";
document.getElementById("p2").style.color="red";
}
} 

var lst=document.registration.gender;
for (i=0;i<lst.length;i++) {
if (lst[i].checked == true) {
break;
}
else {
document.getElementById("gender").innerHTML="Please select your gender";
document.getElementById("gender").style.color="red";
}
}

subjects=document.registration.subjects.value
if (subjects == "") {
document.getElementById("sub").innerHTML ="Please choose the subject";
document.getElementById("sub").style.color="red";
}
}


</script>
</head>
<center> 
<body>
<h1>  PyExam Registration </h1>
<form name="registration" action="https://www.indiabix.com/" onclick="validate()"> 
<table>
<tr> 
<td>First Name:</td> <td><input type="text" name="fn"/> <div id="fn"></div> </td>
</tr>
<tr>
<td>Last Name:</td> <td> <input type="text" name="ln"/> <div id="ln"></div> </td>
</tr>
<tr>
<td>Email Id:</td> <td> <input type="text" name="email"/> <div id="email"></div> </td>
</tr>
<tr>
<td>Phone No:</td> <td> <input type="text" name="ph"/> <div id="ph"></div> </td>
</tr>
<tr>
<td> <p1> Gender: </p1> </td> <td> 
<input type="radio" name="gender" value="male"/> Male
<input type="radio" name="gender" value="female"/> Female 
<div id="gender"></div> </td>
</tr>
<tr>
<td>Password:</td> <td><input type="text" name="p1"/> <div id="p1"></div> </td>
</tr>
<tr>
<td>Confirm Password:</td> <td><input type="text" name="p2"/> <div id="p2"></div> </td>
</tr>
<tr>
<td>Subjects:</td> <td> <select name="subjects"> 
<option value="">Default</option>
<option value="physics"> Physics</option>
<option value="chemistry">Chemistry </option>
<option value="biology">Biology </option>
<option value="cs">Computer Science </option>
</select> <div id="sub"> </div> </td> 
</tr>
<tr>
<td> </td> <td><input type="button" value="Submit"/> </td>
</tr>
</table>

</form> </center>

</body>
</html>

1 Ответов

Рейтинг:
1

Afzaal Ahmad Zeeshan

Три вещи:

Цитата:
Даже после ввода правильных данных сообщение об ошибке все еще сохраняется. Я хочу удалить сообщения об ошибках, как только введу действительные данные
Для этого вам нужно справиться с onKeyUp (или onKeyDown) событие и удалить сообщение об ошибке. Все очень просто.
Для другой части,
Цитата:
В поле пароль после ввода действительного пароля также отображается сообщение об ошибке "пароль недействителен"
Это исчезнет, как только вы удалите сообщение об ошибке. Теперь последняя часть,
Цитата:
Здесь я использовал "кнопку" вместо "отправить". Когда используется "отправить", после нажатия на кнопку "Отправить" с полями, оставленными пустыми, страница направляется на ссылку, которую я использовал в коде. Мне нужно исправить свой код таким образом, чтобы, когда пользователь нажимает кнопку отправки, все сообщения об ошибках должны отображаться пользователю
Для этого вам нужно обработать событие нажатия кнопки, а перед переходом на следующую страницу вам нужно обработать его в JavaScript и проверить, все ли в порядке, иначе остановите страницу от движения вперед. Что-то вроде этого, 
function handleBtnClick() {
   if(!everythingOkay) {
      // Show the error messages here.

      event.preventDefault();
      // OR return false;
   }
}

Это предотвратит перемещение страницы на сервер, и вы также сможете показывать сообщения об ошибках. Помнить это everythingOkay это просто заполнитель — не жалуйтесь, что ему говорят быть undefined Вы должны добавить переменную и проверить, когда все в порядке, а когда нет.