入力タイプ=ボタンでhtml5必須のバリデーターを作成するにはどうすればいいですか？

html5 required validator not working with input type=buttonで説明したように、フォームのボタンタイプがボタンで、送信ではない場合、html5検証は機能しません。この場合でもhtml5検証作業を行うにはどうしますか？入力タイプ=ボタンでhtml5必須のバリデーターを作成するにはどうすればいいですか？

出典

2016-08-01 user1119423

http://stackoverflow.com/questions/16707743/html5-required-validation-not-working –

「jQuery」とタグ付けした理由はわかりません。

ボタンをクリックすると、入力が空の場合は検出することで、JavaScriptでそれを解決することができます。

HTML5フォーム検証プロセスは、フォーム送信ボタンを経由して提出される状況に限定され

... 
if (document.getElementById("InputID").value == "") { 
    // It's empty 
} else { 
    // It's not empty 
} 
...

出典

2016-08-01 11:42:32 Davdriver

すべて役立つことを願っていますJqueryで行うことは、バニラのjavascriptで可能です。 Jqueryのソリューションが必要なので、彼はそれをタグ付けしたかもしれません。 –

。フォーム送信アルゴリズムは、フォームがsubmit（）メソッドを介して送信されたときに検証が実行されないことを明示的に示しています。どうやら、JavaScriptを使ってフォームを送信すると、検証が行われるはずです。

ただし、checkValidity（）メソッドを使用して、HTML5属性で定義された制約に対して（静的な）フォーム検証をリクエストできます。 validityMessageプロパティがフォームではなくフィールド（コントロール）のプロパティであるため、HTML5フォームの検証でブラウザが行うのと同じエラーメッセージを表示したい場合は、すべての制約付きフィールドをチェックする必要があります。。単一制約フィールドの場合は、提示場合のように、これは当然のは簡単です：

function submitform() 
{ 
     var f = document.getElementsByTagName('form')[0]; 
     if(f.checkValidity()) 
     { 
      f.submit(); 
     } 
     else 
     { 
      alert(document.getElementById('example').validationMessage); 
     } 
}

出典

2016-08-01 11:46:28 Shubham

私はあなたにHTML5を使用して簡単な検証手法を示しています。

Javascriptを

<html> 
<head> 
<title>Form</title> 
<script type="text/javascript"> 
function validate() 
{ 
    if(document.getElementById('fname').value=='') 
     { 
     alert('Please fill up the first name!! '); 
     document.getElementById("fname").style.borderColor="red"; 
     document.getElementById("fname").style.backgroundColor="yellow"; 
     document.getElementById("fname").style.borderWidth=2; 
     return false; 
     } 
    else if (document.getElementById('email').value=='') 
    { 
     alert('Please provide valid email address !!'); 
     document.getElementById("email").style.borderColor="red"; 
     document.getElementById("email").style.backgroundColor="yellow"; 
     document.getElementById("email").style.borderWidth=2; 
     return false; 
    } 
    else if (document.getElementById('phone').value=='') 
     { 
     alert('Please provide phone no'); 
     document.getElementById("phone").style.borderColor="red"; 
     document.getElementById("phone").style.backgroundColor="yellow"; 
     document.getElementById("phone").style.borderWidth=2; 
     return false; 
     } 
    else if (document.getElementById('day').value=='') 
     { 
     alert('Please provide date for D.O.B'); 
     document.getElementById("day").style.borderColor="red"; 
     document.getElementById("day").style.backgroundColor="yellow"; 
     document.getElementById("day").style.borderWidth=2; 
     return false; 
     } 
    else if (document.getElementById('month').value=='') 
     { 
     alert('Please provide month for D.O.B'); 
     document.getElementById("month").style.borderColor="red"; 
     document.getElementById("month").style.backgroundColor="yellow"; 
     document.getElementById("month").style.borderWidth=2; 
     return false; 
     } 
    else if (document.getElementById('year').value=='') 
    { 
     alert('Please provide year for D.O.B'); 
     document.getElementById("year").style.borderColor="red"; 
     document.getElementById("year").style.backgroundColor="yellow"; 
     document.getElementById("year").style.borderWidth=2; 
     return false; 
    } 
    else if(document.getElementById("city").value=="-1") 
    { 
     alert('Please select a city'); 
     return false; 
    } 


    else 
     { 
     confirm('Do you want to save the form ??'); 
     } 

} 
</script> 

</head> 
<body bgcolor="#FFCCCC"> 
<h1><b><i><u>Registration Form</u></i></b></h1> 

<form name="form1" method="post"> 
<table align="centre" bgcolor="#00FF00"> 
<tr> 
    <td>Full Name:</td> 
    <td><input type="text" id ="fname" name="fname" size="30"required placeholder="This field is Mandatory"></td> 

</tr> 
<tr> 
    <td>Email:</td> 
    <td><input type="email" id="email" name="email" size="30"required placeholder="Enter a valid Email Address"></td> 

</tr> 
<tr> 
    <td>Phone No.:</td> 
    <td><input type="number" id="phone" size="30" name="phone" required ></td> 

</tr> 
<tr> 
    <td>Date of Birth: 
    Day 
    <td><input type="number" name="day" id='day' min="1" max="31" value="" required> 
    Month 
    <input type="number" name="month" min="1" id='month' max="12" value="" required> 
    Year 
    <input type="number" name="year" min="1950" id='year'max="2020" value="" required> 

</tr> 
<tr> 
    <td>City:</td> 
    <td> 
     <select id="city"> 
      <option value="-1">-~Select One~-</option> 
      <option>KOLKATA</option> 
      <option>DELHI</option> 
      <option>MUMBAI</option> 
      <option>CHENNAI</option> 
      <option>BANGALORE</option> 
     </select> 
    </td> 


</tr> 
<tr> 
    <td><input type="submit" value="Login" onclick="return(validate());"></td> 
</tr> 
<hr> 

</table> 
</form> 

</body> 
</html>

を使用して

<!DOCTYPE html> 
<html> 
<body> 

<form action="#" autocomplete="on"> 
    First name:<input type="text" name="fname" required><br> 
    Last name: <input type="text" name="lname" required><br> 
    E-mail: <input type="email" name="email"autocomplete="off" required ><br> 
    <input type="submit"> 
</form> 



</body> 
</html>

検証は、それはあなたのことができます

出典

2016-08-01 11:53:33 Sampad

入力タイプ=ボタンでhtml5必須のバリデーターを作成するにはどうすればいいですか？

答えて

関連する問題