<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="images/fav_icon.png">
<script>
function submitAlbum(){
var frm=document.getElementById("custRegistration");
frm.action="CustomerinfoServlet?formidentity=domobileappRegistrations";
frm.submit();
}
</script>
</head>
<body style=" background-color:#f9f9f9" onload="DrawCaptcha();">
<!--start mainwrap-->
<div id="mainwrap">
<!--start midwrap-->
<div id="midwrap">
<div style="width: 100%; background-repeat:no-repeat; margin-top:15px; height:546px; background-image: url('images/form_background.png')">
<br/><br/><br/>
<div style="margin: 0 auto; background-color: #ffffff; opacity:0.9; border: 1px solid #D7EBFF; width: 400px; padding: 15px; height: 440px; margin-left: 56%;">
<form class="form" name ="custRegistration" id="custRegistration" onsubmit="return submitAlbum(this)" action="download.jsp" method="post" >
<p class="name">
<label for="name">Name <span style="color:red">*</span>:</label>
<input type="text" name="name" id="name" placeholder="" pattern="[A-Za-z ]{3,20}" required/>
<input type="hidden" id="formidentity" name="formidentity" value="domobileappRegistrations"/>
</p>
<p class="email">
<label for="email">Email Id <span style="color:red">*</span>:</label>
<input type="email" name="email" id="email" pattern="((\w+\.)*\w+)@(\w+\.)+(|org|net|us|info|biz|co)" required aria-required="true" placeholder="" required/>
</p>
<p class="submit">
<label for="download" id="freetrail"></label>
<input type="submit" value="Submit" />
</p>
</form>
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</body>
</html>
Above form is working fine in all the browsers except safari(version used is-5.1.7) and iPad.In safari the form is not validating the html5 required attribute and making the form to submit, while in other browsers(chrome,firefox,IE) its working fine.so can anyone tell me how can i make it done with safari??any help would be appreciated..
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="images/fav_icon.png">
<script>
function submitAlbum(){
var frm=document.getElementById("custRegistration");
frm.action="CustomerinfoServlet?formidentity=domobileappRegistrations";
frm.submit();
}
</script>
</head>
<body style=" background-color:#f9f9f9" onload="DrawCaptcha();">
<!--start mainwrap-->
<div id="mainwrap">
<!--start midwrap-->
<div id="midwrap">
<div style="width: 100%; background-repeat:no-repeat; margin-top:15px; height:546px; background-image: url('images/form_background.png')">
<br/><br/><br/>
<div style="margin: 0 auto; background-color: #ffffff; opacity:0.9; border: 1px solid #D7EBFF; width: 400px; padding: 15px; height: 440px; margin-left: 56%;">
<form class="form" name ="custRegistration" id="custRegistration" onsubmit="return submitAlbum(this)" action="download.jsp" method="post" >
<p class="name">
<label for="name">Name <span style="color:red">*</span>:</label>
<input type="text" name="name" id="name" placeholder="" pattern="[A-Za-z ]{3,20}" required/>
<input type="hidden" id="formidentity" name="formidentity" value="domobileappRegistrations"/>
</p>
<p class="email">
<label for="email">Email Id <span style="color:red">*</span>:</label>
<input type="email" name="email" id="email" pattern="((\w+\.)*\w+)@(\w+\.)+(|org|net|us|info|biz|co)" required aria-required="true" placeholder="" required/>
</p>
<p class="submit">
<label for="download" id="freetrail"></label>
<input type="submit" value="Submit" />
</p>
</form>
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</body>
</html>
Above form is working fine in all the browsers except safari(version used is-5.1.7) and iPad.In safari the form is not validating the html5 required attribute and making the form to submit, while in other browsers(chrome,firefox,IE) its working fine.so can anyone tell me how can i make it done with safari??any help would be appreciated..
Share asked Jun 3, 2014 at 7:15 User2413User2413 6157 gold badges23 silver badges52 bronze badges 1-
1
The HTML
requiredshouldn't be your only validation, just a sidenote – Déjà vu Commented Jun 3, 2014 at 7:16
1 Answer
Reset to default 1The HTML form validation is a Working Draft. It is a method of setting required fields and field types without requiring JavaScript.
Partial support in Safari refers to lack of notice when form with required fields is attempted to be submitted. Partial support in IE10 mobile refers to lack of warning when blocking submission.
Also support for using differently colored borders is not plete in Firefox or Opera - using a separate class for styling works well in both.
In Chrome the attribute formnovalidate doesn't work on <input type="submit"> elements but does on <button type="submit"> elements.
You can try to use the script bellow for all browsers not supporting HTML5 required attribute:
//Required attribute fallback
$('#form').submit(function() {
if (!attributeSupported("required") || ($.browser.safari)) {
//If required attribute is not supported or browser is Safari
//(Safari thinks that it has this attribute, but it does not work),
//then check all fields that has required attribute
$("#form [required]").each(function(index) {
if (!$(this).val()) {
//If at least one required value is empty, then ask to fill all required fields.
alert("Please fill all required fields.");
return false;
}
});
}
return false; //This is a test form and I'm not going to submit it
});
EDIT: As alternative, you can use the jQuery validation plugin, in such basic way (more details on how-to use it are if you follow the link):
$(document).ready(function() {
// validate the form when it is submitted
$("#form").validate();
});
This is the most browser's patible solution.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745050886a4608379.html
评论列表（0条）