Wie in html5 required validator not working with input type=button erwähnt, funktioniert die HTML5-Validierung nicht, wenn der Formularschaltflächentyp Schaltfläche ist, nicht senden. Gibt es trotzdem die HTML5-Validierung in diesem Fall?Wie HTML5 erforderlichen Validator Arbeit mit Input-Typ = Taste machen?
Ich weiß nicht, warum Sie es als "jQuery" getaggt haben.
Sie können es mit Javascript lösen, durch Erfassen, wenn die Eingabe leer ist, wenn Sie auf eine Schaltfläche klicken:
...
if (document.getElementById("InputID").value == "") {
// It's empty
} else {
// It's not empty
}
...
Sie alles, mit Jquery tun ist mit Vanilla Javascript möglich. Er könnte es markiert haben, weil er eine Jquery-Lösung möchte. –
Der HTML5-Formularvalidierung Prozess ist auf Situationen beschränkt, in denen die Form über einen Absenden-Button vorgelegt wird . Der Formulareinreichungsalgorithmus besagt explizit, dass die Validierung nicht durchgeführt wird, wenn das Formular über die submit() -Methode gesendet wird. Offensichtlich ist die Idee, dass wenn Sie ein Formular über JavaScript senden, Sie eine Validierung durchführen sollen.
Sie können jedoch eine (statische) Formularvalidierung anhand der durch HTML5-Attribute definierten Bedingungen anfordern, indem Sie die Methode checkValidity() verwenden. Wenn Sie die gleichen Fehlermeldungen anzeigen möchten, die der Browser bei der HTML5-Formularvalidierung verwenden würde, müssten Sie alle eingeschränkten Felder überprüfen, da die Eigenschaft validityMessage eine Eigenschaft von Feldern (Steuerelementen) und nicht das Formular ist . Im Falle eines einzelnen erzwungener Feld, wie in dem Fall dargestellt, dann ist dies trivial natürlich:
function submitform()
{
var f = document.getElementsByTagName('form')[0];
if(f.checkValidity())
{
f.submit();
}
else
{
alert(document.getElementById('example').validationMessage);
}
}
ich Sie mit html5 eine einfache Validierung Technik gezeigt haben.
<!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>
Validation mit 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>
Hoffe, es wird Ihnen helfen,
http://stackoverflow.com/questions/16707743/html5-required-validation-not-working –