2016-09-14 8 views
-3

この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 

&nbsp; <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> 
+1

あなたは早すぎると伝えられていませんユーザーに送信されています...サーバーで確認される前に?実際に送信されない、またはサーバー側のエラーがある場合はどうなりますか?また、ボタンの代わりにフォームの送信イベントを使用する方がいいです...ユーザーがキーボードで送信するとどうなりますか? – charlietfl

+0

すべての検証が完了したら、ユーザーがsubmitをクリックし、flagがtrueの場合はメッセージを表示します。 –

答えて

0

をあなたが送信ボタン用のonclickイベントハンドラは必要ありません。動作するようには思えないよう、私は、電子メールのチェックをコメントアウト

  • function submitClick() { 
     
        if (formValidation()) { 
     
         alert("Thank you for your time! Your details have been submitted!"); 
     
         return true; 
     
        } else { 
     
         return false; 
     
        } 
     
        } 
     
    
     
        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 
     
        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; 
     
        }
    <html> 
     
    <head></head> 
     
    
     
    <body bgcolor="#FFFFFF"> 
     
    
     
        <form name="myForm" method="post" onsubmit="return submitClick();"> 
     
    
     
        <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 &nbsp; 
     
         <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"> 
     
         </p> 
     
    
     
        </form> 
     
    
     
    </body> 
     
    </html>

    ノート:ちょうどこのような形のonsubmitイベントハンドラを使用します。

  • 安全な検証は、逆の方法で処理する必要があります。フラグをfalseに設定し、すべてが正常であれば、flagをtrueに設定します。
+1

ありがとう、そんなに – Thulaz

1
if(formValidation()) 
{ 
    alert("Thank you for your time! Your details have been submitted!"); 
} 

submitClick方法でアラート前ifを入れています。そうすれば、検証が成功した場合にのみアラートが表示されます。

+0

ありがとうございました – Thulaz

0

ちょうどあなたのクリック提出に追加します。

function submitClick() //function shows message after submitting information 
{ 
    let flag = formValidation(); 
    if(flag) 
    { 
    alert("Thank you for your time! Your details have been submitted!"); 
    } 
} 
+0

ありがとうございました。これは、submitClick()がonsubmitイベントハンドラとして使用されるときにうまくいきました – Thulaz

+0

はい、それを行うか、同じonClick = ""イベントから呼び出すことができます... –

関連する問題