SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2013
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Call JQuery validationEngine on image click submit

    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/cre...alidators.html

    Code:
    <!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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Quote Originally Posted by edge82 View Post
    Any idea?
    Yes. Remove the <div> from around the submit button and it will work as expected.

    e.g. this:

    Code:
    <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:

    Code:
    <input type="image" src="http://blog.oneclass.com/wp-content/uploads/2013/09/submit.jpg" width="100" height="100" />
    HTH.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2013
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,


    I remove div and writeb onClick java script submit on image but it is not validating form.

    Code:
       <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

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    I haven't really used this plugin, but I don't think you need the onclick handler on the input element:

    Code:
    <!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.

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2013
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many Thanks Pullo ,

    It works.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •