HTML 5 native validation is not working in JQuery UI model box but Jquery validation using plugin is working
Question
I am using a JQuery model box where HTML 5 native validation is not working.
My code is here
Also I am adding the code below.
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Open Dialog </title>
<link rel="stylesheet" href="../css/jquery-ui.css" />
<link rel="stylesheet" href="../css/style.css" />
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript" src="../scripts/jquery-ui.js"></script>
<script type="text/javascript" src="../scripts/jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
//$('#pop_up_form').validate();
$("#popup").dialog({
autoOpen: true,
title : "View/Edit Screen",
dialogClass : "pop-content pop-header-colr pop-button pop-float",
width:400,
height:450,
modal: true,
resizable: false,
show: 'clip',
buttons:{
'SUBMIT':function(){
/*if($('#pop_up_form').valid())
{
alert("successfull");
}*/
}
}
});
});
</script>
</head>
<body>
<div id="popup" style="display:none">
<form action="" name="pop_up_form" id="pop_up_form" method="post"><input class="pop_up_textbox" type="text" name="acct_nmbr" id="acct_nmbr" required maxlength="19" value=""/></form>
</div>
</body>
</html>
Here if you are un-commenting those jquery code that I commented , you can see that the Jquery validation is working fine. But why HTML5 validation is not working here if I am commenting the Jquery validation code. To test HTML 5 validation I have added an attribute "required" for a form field , but some how this is not working.
I know that for HTML 5 doctype should be !DOCTYPE HTML . I have added this also but no luck. Is it because of UI dialog box which doesnt support HTML 5 native validation.
2 answers
solution1
2 ACCPTED 2014-06-26 04:30:28
It is actually happening because your modal box's button doesn't trigger HTML5 validation.
You cannot use use both HTML5 and jQuery validations. If you want to go with just HTML5 validation while still using jQuery, you can do something like this for your submit() in your situation to let it call HTML5 validation.
function(){
$('#pop_up_form .submit').click();
return false;
}
For this to work, you will need to have a hidden input in your form HTML
<input type="submit" class="submit" style="display:none;"></input>
FIDDLE
I still see people using browsers that don't support HTML5, you may want to re-think this.
solution2
0 2014-06-26 04:14:40
It is working, but you aren't seeing anything because there is no default styling ( in some browsers like Chrome version 35.0.1916.153 on Mac ) for errors. Just add some CSS and it'd be good to go, I've added a bit of CSS to your code so you can see what I mean: HTML5 Validation
CSS
input:required:invalid, input:focus:invalid {
background:red;
-moz-box-shadow: none;
}
Cheers.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.