SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Posts
    97
    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,358
    Mentioned
    179 Post(s)
    Tagged
    9 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 Enthusiast
    Join Date
    Apr 2013
    Posts
    97
    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,358
    Mentioned
    179 Post(s)
    Tagged
    9 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 Enthusiast
    Join Date
    Apr 2013
    Posts
    97
    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
  •