edge82
1
Hi,
I am using jquery validationEngine for form validation.
It works fine with submit button but when I want to submit form on click of image
it is not working as submit button.
I write on click java script to submit the form.
Following is example and url of validationEngine
http://www.position-relative.net/creation/formValidator/demos/demoValidators.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>validationEngine</title>
<link rel="stylesheet" href="includes/style/validationEngine.jquery.css" type="text/css"/>
<script src="includes/style/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="includes/style/js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="includes/style/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#frmLogin").validationEngine();
});
</script>
</head>
<body>
<form name="frmLogin" id="frmLogin" action=""/>
<table width="100%" border="1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" name="txtName" id="txtname" value="" class="validate[required] text-input" /></td>
</tr>
<tr>
<td> </td>
<td></td>
</tr>
<tr>
<td> </td>
<td>
<div onclick="document.frmLogin.submit();">
<input type="image" src="http://blog.oneclass.com/wp-content/uploads/2013/09/submit.jpg" width="100" height="100" />
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
Any idea?
-Thanks
Hi there,
Yes. Remove the <div> from around the submit button and it will work as expected.
e.g. this:
<div onclick="document.frmLogin.submit();">
<input type="image" src="http://blog.oneclass.com/wp-content/uploads/2013/09/submit.jpg" width="100" height="100" />
</div>
should be just this:
<input type="image" src="http://blog.oneclass.com/wp-content/uploads/2013/09/submit.jpg" width="100" height="100" />
HTH.
edge82
3
Hi,
I remove div and writeb onClick java script submit on image but it is not validating form.
<input onclick="document.frmLogin.submit();" type="image" src="http://blog.oneclass.com/wp-content/uploads/2013/09/submit.jpg" width="100" height="100" />
It submit form without validating using validation engine.
-Thanks
I haven’t really used this plugin, but I don’t think you need the onclick handler on the input element:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>validationEngine</title>
<link rel="stylesheet" href="http://www.position-relative.net/creation/formValidator/css/validationEngine.jquery.css" type="text/css"/>
<style>
div{ margin:55px 0 0 0 }
</style>
</head>
<body>
<form name="frmLogin" id="frmLogin" action=""/>
<div>
<label for="txtname">Name</label>
<input type="text" name="txtName" id="txtname" value="" class="validate[required] text-input" /><br>
<input type="image" src="http://blog.oneclass.com/wp-content/uploads/2013/09/submit.jpg" width="100" height="100" />
</div>
</form>
<script src="http://www.position-relative.net/creation/formValidator/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://www.position-relative.net/creation/formValidator/js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.position-relative.net/creation/formValidator/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script>
$("#frmLogin").validationEngine();
</script>
</body>
</html>
Demo.