Papermashup

Subscribe


Tweets


"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 3 days ago

"RT @lalpra: Galaxy Note 7 Unboxing https://t.co/FM8gZmqpBK"

@ashleyford 5 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Ketchup jQuery form validation

AshleyAshley

I recently had the need for some client side form validation and happened to find the jQuery Ketchup plugin. It’s a simple and flexible plugin that can be modified and styled for your own needs, plugin modifications are encouraged although the ‘out of the box’ code will work just fine for your basic needs. You’ll need to download the plugin files to get started. once download follow these simple steps to implement it into your application.

Step 1

include the files in the plugin as shown below, remember to include jQuery.


<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ketchup.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.messages.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.validations.basic.js"></script>

Step 2

Create a basic form with some validation requirements, notice that we’re adding a specific class to a text input that requires validation.



  <form action="" method="post" id="signup">

  <label>Username</label><br/>
  <input type="text" class="validate(required, username)" name="username"/><br/>
  <label>Password</label><br/>
  <input type="password" class="validate(required)" id="password" name="password"/><br/>
  <label>Retype password</label><br/>
  <input type="password" type="text" class="validate(match(#password))" name="passwordconf"/><br/>
  <label>Email</label><br/>
  <input type="text" class="validate(email) inputbox" name="email"/><br/>

  <input type="submit"  value="Sign Up"/>
  </form>

Step 3

finally we need to run the Ketchup plugin function specifying the id of our form


$(document).ready(function() {
  $('#signup').ketchup();
});

I’ve found this plugin really useful, and it’s a quick way to add validation to your forms. Remember it’s always advised to use server side validation along with client side to make sure that the data you collect is correct and your application secure. for more information about the Ketchup jQuery plugin click here.

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 13
  • Adnan
    Posted on

    Adnan Adnan

    Reply Author

    Has anyone been able to use this plugin with a validation containing ajax call???


  • coders
    Posted on

    coders coders

    Reply Author

  • ehsan
    Posted on

    ehsan ehsan

    Reply Author

    how i can implement plz guid me im new to learn ejax and jquary


  • Bruce
    Posted on

    Bruce Bruce

    Reply Author

    For some reason I have not been able to get ketchup to work on Firefox. I’ve never been able to get the ‘exact’ js files as listed here or on the ketchup site. Any help would be appreciated as I love the demo.


  • mauricio sanchez
    Posted on

    mauricio sanchez mauricio sanchez

    Reply Author

    haber esta ultima linea donde se debe poner tengo problemas con eso gracias $(document).ready(function() {
    $(‘#example1’).ketchup();
    });


  • Andrew
    Posted on

    Andrew Andrew

    Reply Author

    It works with IE8 if your page displays in standards compliance mode. For IE7 it requires a small fix which is documented at the bottom of this page: http://github.com/mustardamus/ketchup-plugin/issues#issue/6


  • Taner Senyurt
    Posted on

    Taner Senyurt Taner Senyurt

    Reply Author

    It works Opera,Chrome,Firefox,Safari but not compatible with IE


  • ava
    Posted on

    ava ava

    Reply Author

    love your blogg!!


  • Sashi
    Posted on

    Sashi Sashi

    Reply Author

    Thanks a lot… wonderful !
    The plugin is simply awesome !


  • Jay
    Posted on

    Jay Jay

    Reply Author

    Hi Ashley,

    Nice and easy to implement. 1 thing though, not compatible with IE? i’v tried it on both 7 and 8 but had no luck. Please confirm with this. Thank you.

    Regards,

    Jay
    -Philippines