需要帮助调试我的JS，HTML代码 [英] Need help in debugging my JS, HTML code
本文介绍了需要帮助调试我的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>
我尝试过：
What I have tried:
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>
推荐答案
/ .test（fn）== false））{
if （fn.length =='0'）{
document.getElementById（fn）。innerHTML =名字是强制性的;
document.getElementById（fn）。style.color =red;
}
else {
document.getElementById（fn）。innerHTML =名字只应包含字母;
document.getElementById（fn）。style.color =red;
}
}
ln = document.registration.ln.value;
if（（ln.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 =姓氏是强制性的;
document.getElementById（ln）。style.color =red;
}
else {
document.getElementById（ln）。innerHTML =姓氏只应包含字母;
document.getElementById（ln）。style.color =red;
}
}
email = document.registration.email.value;
if（（email.length =='0'）||（/^([a-zA-Z0-9_\.\-])+\@(([a-azA-Z0 -9 \ - ]）+ \。）+（[a-zA-Z0-9] {2,4}）+
/.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 =电子邮件ID是强制性的;
document.getElementById（email）。style.color =red;
}
else {
document.getElementById（email）。innerHTML =电子邮件ID无效;
document.getElementById（email）。style.color =red;
}
}
ph = document.registration.ph.value;
if（（ph.length =='0'）||（/ ^ [0-9] {10}
/.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}
这篇关于需要帮助调试我的JS，HTML代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
