このhtmlフォームにはさまざまな要素があります。私はアラートを生成する必要があります "あなたの時間をありがとう!あなたの詳細は提出されている!送信ボタンがクリックされると、フォームが一杯になったときのみ表示されます。フォームが空の場合、私はこのメッセージを見たくありません。これまではonClickイベントを使用していました。誰かが(私はこの使用してJavascriptを実装しようとしている)、この上Javascriptを使用してhtmlフォームがいっぱいになっている場合のみ、[送信]ボタンをクリックすると警告を生成する方法
を私を助けてくださいすることができます。ここJavascriptコードやHTML本体
<html>
<head>
<title>JS Validation for other types of form input fields</title>
<script type="text/javascript">
function submitClick() //function shows message after submitting information
{
alert("Thank you for your time! Your details have been submitted!");
}
function formValidation ()
{
flag = true;
if (document.myForm.user_name.value == "")
{
alert ("Please fill in your Name!");
flag = false;
}
// Validate letters only as Name
if (!/^[a-zA-Z]*$/g.test(document.myForm.user_name.value))
{
alert("Enter alphabetic characters as Name!");
flag = false;
}
// Validate emails
if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)* (\.\w{2,3})+$/.test(myForm.user_email.value)) //Regular expressions to validate email
{
alert("Enter Valid Email Address!");
flag = false;
}
// Validate Phone number
flag = true;
if (document.myForm.user_phone.value == "")
{
alert ("Please fill in your Phone Number!");
flag = false;
}
if (!/^[0-9]*$/g.test(myForm.user_phone.value))
{
alert("Enter numeric values as Phone Number!");
flag = false;
}
if ((document.myForm.userGender[0].checked == false) && (document.myForm.userGender[1].checked == false))
{
alert ("Please select your gender!");
flag = false;
}
if (document.myForm.userAge.selectedIndex == 0)
{
alert ("Please select your Age from the drop-down list!");
flag=false;
}
if (document.myForm.termsAndConditions.checked == false)
{
alert ("Please check the Terms and Conditions box!");
flag= false;
}
return flag;
}
</script>
</head>
<body bgcolor = "#FFFFFF">
<form name="myForm" method="post" onSubmit=" return formValidation();">
<h1>Please fill out your details below:</h1>
<p>Name: <input type="text" name="user_name"></p>
<p>Email: <input type="text" name="user_email"></p>
<p>Phone: <input type="text" name="user_phone"></p>
<p>Gender: <input type="radio" name="userGender" value="Male">Male
<input type="radio" name="userGender" value="Female">Female</p>
<p>Age:
<select name="userAge">
<option value="">Please select your age:</option>
<option value="0-17 years">0-17 years</option>
<option value="18-29 years">18-29 years</option>
<option value="30-40 years">30-40 years</option>
<option value="40-64 years">40-64 years</option>
<option value="65+ years">65+ years</option>
</select>
<p>Please tick the checkbox if you agree with our Terms and Conditions:
<input type="checkbox" name="termsAndConditions" value="Yes"> Yes
<p><input type="submit" name="send" value="Submit Details" onClick="submitClick()"></p>
</form>
</body>
</html>
あなたは早すぎると伝えられていませんユーザーに送信されています...サーバーで確認される前に?実際に送信されない、またはサーバー側のエラーがある場合はどうなりますか?また、ボタンの代わりにフォームの送信イベントを使用する方がいいです...ユーザーがキーボードで送信するとどうなりますか? – charlietfl
すべての検証が完了したら、ユーザーがsubmitをクリックし、flagがtrueの場合はメッセージを表示します。 –