2
私は職場でフォーム検証スクリプトを作成していますが、問題があります。このフォームは、ユーザーが名前、実際の電子メール、カテゴリ（ドロップダウンから）、質問を記入することを保証するためのものです。インラインJavaScriptフォームの検証
これはフォームに名前を付け、フォームからすべてのデータを収集します：
<script>
function checkForm(form1) {
name = document.getElementById("FieldData0").value;
category = document.getElementById("FieldData3").value;
question = document.getElementById("FieldData1").value;
email = document.getElementById("FieldData2").value;
これは何かが「名前」フィールドにあることを確認するためにチェックします。正常に動作し、エラーテキストを表示するように正確に検証します。
if (name == "") {
hideAllErrors();
document.getElementById("nameError").style.display = "inline";
document.getElementById("FieldData0").select();
document.getElementById("FieldData0").focus();
return false;
これはまさにこれと同じように動作します。これは、電子メールのフィールドが空であるかどうかをチェックし、それが空の場合、エラーテキストを表示し、そのフィールドを選択します。
} else if (email == "") {
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("FieldData2").select();
document.getElementById("FieldData2").focus();
return false;
}
これはまた、それは、質問フィールドが空でないことを確認する必要があるだけのように動作します：
else if (question == "") {
hideAllErrors();
document.getElementById("questionError").style.display = "inline";
document.getElementById("FieldData1").select();
document.getElementById("FieldData1").focus();
return false;
}
この1つは、部分的に動作します - フォームを提出しながら、ダウン何のドロップが選択されていない場合は、エラーメッセージが表示されますが、それは提出からフォームを停止しない、それだけでエラーテキストが表示されます。
をelse if (category == "") {
hideAllErrors();
document.getElementById("categoryError").style.display = "inline";
document.getElementById("FieldData3").select();
document.getElementById("FieldData3").focus();
return false;
}
私はどこに置いても、これはまったく動作しません。私は先週同じスクリプトでバリエーションを使用しましたが、うまくいきました。ユーザーが砲撃されていないので、この機能はすべてのエラーを隠し
function check_email(e) {
ok = "1234567890qwertyuiop[][email protected]_QWERTYUIOPASDFGHJKLZXCVBNM";
for(i=0; i < e.length ;i++){
if(ok.indexOf(e.charAt(i))<0){
return (false);
}
}
if (document.images) {
re = /(@.*@)|(\.\.)|(^\.)|(^@)|(@$)|(\.$)|(@\.)/;
re_two = /^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (!e.match(re) && e.match(re_two)) {
return (-1);
}
}
}
：これは、電子メールをチェックアウトし
else if (!check_email(document.getElementById("FieldData1").value)) {
hideAllErrors();
document.getElementById("emailError2").style.display = "inline";
document.getElementById("FieldData2").select();
document.getElementById("FieldData2").focus();
return false;
}
Otherwise it lets the form submit:
return true;
}
：これは、電子メールは、実際の電子メールアドレスのようなルックスに入ったことを確認してくださいすることになっています赤いテキストで。私は "のdocument.getElementById（" emailError "）に入れてみましたがどれも "" それが全部壊れないstyle.displayを=。"：
function hideAllErrors() {
document.getElementById("nameError").style.display = "none"
document.getElementById("emailError").style.display = "none"
document.getElementById("categoryError").style.display = "none"
document.getElementById("questionError").style.display = "none"
}
</script>
を、フォームは次のようになります。
<form onSubmit="return checkForm();" method="post" action="http://www.emailmeform.com/fid.php?formid=303341io4u" name="form1">
<p><div class=error id=nameError>Required: Please enter your name<br/></div><p><strong>Name:</strong> <span></span><br><input type="text" name="FieldData0" id="FieldData0" value="" size="22" tabindex="1" />
<label for="name"></label></p>
<p><div class=error id=emailError>Required: Please enter your email address<br/></div>
<div class=error id=nameError2>This doesn't look like a real email address, please check and reenter<br/></div>
<strong><p>Email:</strong> <span>(will not be published)</span><br><input type="text" name="FieldData2" id="FieldData2" value="" size="22" tabindex="2" />
<label for="email"></label>
</p>
<div class=error id=categoryError>Please select a category from the drop-down menu<br></div>
<p><strong>Category:</strong> <span></span><br>
<p><select id="FieldData3" name="FieldData3">
<option value="">Please select a category</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="other">Other</option>
</select><label for="category"></label>
<p><div class=error id=questionError>Please type your question in the box below:<br></div><label for="question"><strong><p>Your Question:</strong> <span></span></label><br>
<textarea name="FieldData1" id="FieldData1" cols="50" rows="10"></textarea></p>
<p><input type="submit" class="btn" value="Submit Question" name="Submit"></p>
</div>
</form>
小切手を発行する順序は問題ですか？私はこれを理解できないようです。どんな助けもありがとう。
このような徹底的な答えをありがとうございます。私はあなたのアドバイスを心に刻みます。 –
大歓迎です。ハッピーコーディング！ – brianpeiris