Call JQuery validationEngine on image click submit

edge82 2013-09-28 09:31:59 UTC #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>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Name</td>
    <td><input type="text" name="txtName" id="txtname" value="" class="validate[required] text-input"  /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td></td>
  </tr>
  <tr>
    <td>&nbsp;</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

Pullo 2013-09-28 11:27:23 UTC #2

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 2013-09-28 13:49:30 UTC #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

Pullo 2013-09-28 19:39:37 UTC #4

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.

edge82 2013-09-29 05:39:23 UTC #5

Many Thanks Pullo ,

It works.

system 2014-10-08 04:55:28 UTC #6

ThemesPodcastArticlesPremium