0
私はJSの新人です。ここでフォームの検証は電話フィールドの後に "名前"フィールドから始まり、次にメールとその後の上部フィールドなどに移動します。検証が正しい場合でも、ボトムフィールドからの検証を開始するという奇妙な動作？フォームの検証は下のフィールドから始まります。そのような奇妙な振る舞い
function checkform(pform1) {
var uname = pform1.username.value;
var pswrd = pform1.password.value;
var repswrd = pform1.repassword.value;
var email = pform1.email.value;
var phone = pform1.phone.value;
var name = pform1.name.value;
var cleanstr = phone.replace(/[\(\)\.\-\ ]/g, '');
var err = {};
var validemail = /^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var minNumberofChars = 6;
var maxNumberofChars = 16;
var regularExpression = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;
//check required fields
//password should be minimum 6 chars but not greater than 16
if (uname == null || uname == "") {
err.message = "UserName can't be blank";
err.field = pform1.username;
}
if ((pswrd.length < minNumberofChars) || (pswrd.length > maxNumberofChars)) {
err.message = "Invalid password length";
err.field = pform1.password;
} else if (!regularExpression.test(pswrd)) {
err.message = "password should contain atleast one number and one special character";
err.field = pform1.password;
}
//validate email
if (!(validemail.test(email))) {
err.message = "Invalid email";
err.field = pform1.email;
}
//check phone number
if (isNaN(parseInt(cleanstr))) {
err.message = "Invalid phone number";
err.field = pform1.phone;
} else if (phone.length < 10 || phone.length > 10) {
err.message = "please enter valid phone number";
err.field = pform1.phone;
}
if (name == null || name == "") {
err.message = "Name can't be blank";
err.field = pform1.name;
}
if (pswrd !== repswrd) {
err.message = "Password wont match";
err.field = pform1.repassword;
}
if (err.message) {
document.getElementById('divError').innerHTML = err.message;
err.field.focus();
return false;
} else {
window.location.href = "newform2.html";
return false;
}
return true;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Form Handling </title>
<!-- <link href="formstyle.css" rel="stylesheet" type="text/css" /> -->
</head>
<body style="background-color:powderblue;">
<h3> Welcome!Please fillup all the details
</h3>
<form action="#" method="post" onsubmit="return checkform(this);">
<div id="errmsgbox">
<div id="divError" style="color:#FF0000">
</div>
</div>
<fieldset class="credentials">
<legend> Access Credentials
</legend>
<table border="0">
<tr>
<td>
<label for="username" class="hover"> Username
</label>
</td>
<td>
<input type="text" id="username" class="required text" autofocus />
<span class="style1"> *
</span>
</td>
</tr>
<tr>
<td>
<label for="password" class="hover"> Password
</label>
</td>
<td>
<input type="password" id="password" class="required text" />
<span class="style1"> *
</span><br />
<span class="tooltip"> Minimum 6 and maximum 16 characters
</span>
</td>
</tr>
<tr>
<td>
<label for="repassword" class="hover"> Re - enter Password
</label>
</td>
<td>
<input type="password" id="repassword" class="required text" />
<span class="style1"> *
</span><br />
</td>
</tr>
<tr>
<td>
<label for="email" class="hover"> Email
</label>
</td>
<td>
<input type="text" id="email" class="required email text" />
<span class="style1"> *
</span>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend> Other Information
</legend>
<table border="0">
<tr>
<td width="59">
<label for="name" class="hover"> Name
</label>
</td>
<td width="207">
<input type="text" id="name" class="required text" />
<span class="style1"> *
</span>
</td>
</tr>
<tr>
<td>
<label for="phone" class="hover"> Phone
</label>
</td>
<td>
<input type="text" id="phone" class="phone text" />
<span class="style1"> *
</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Next" class="submit" />
</td>
</tr>
<tr>
<td colspan="2"> * = Required Field
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>フォームの検証は、 "名前" フィールドから始まる
ないあなたが何を意味するか確認してください。 Javascriptは順番に実行されるので、 'checkform（）'関数でプログラムする順序で検証します。 – Barmar
複数のエラーがあるときにフォーカスがどこに行くのか話していますか？フォーカスは 'err.field'に行き、各検証チェックはこれを上書きします。フォーカスはそこに割り当てられた最後のフィールドに移動します。 – Barmar
そして、 'err.message'は、検証に失敗した最後のフィールドからのメッセージです。 – Barmar