happyjs Training in Chandigarh

Webtechlearning provide the best training in Happy.js in Chandigarh, India. Happyjs Lightweight form validation for jQuery or Zepto.js Happy.js was created by @HenrikJoreteg and  currently being maintained by Michael Garvin.

WHY HAPPY.JS?

Yes, there a million form validation plugins already – but I like this approach and the good news is, if you don’t, you have other options. In fact, if you want something really full-featured for jQuery. Use this one. Personally I wanted something really lightweight and extendable (because it’s hard to be happy when you’re bloated)

DOWNLOAD

• Happy.js

Or… you can clone the whole project from GitHub with Git by running:

$(‘FORM’).ISHAPPY()? THE QUICK DEMO:

STEP 1. – DEFINE YOUR FORM

<form id="awesomeForm" action="/lights/camera" method="post">
  <input id="yourName" type="text" name="name" />
  <input id="email" type="text" name="email" />
</form>

STEP 2. – DEFINE YOUR VALIDATION SCHEME

$('#awesomeForm').isHappy({
    fields: {
      // reference the field you're talking about, probably by `id`
      // but you could certainly do $('[name=name]') as well.
      '#yourName': {
        required: true,
        message: 'Might we inquire your name'
      },
      '#email': {
        required: true,
        message: 'How are we to reach you sans email??',
        test: happy.email // this can be *any* function that returns true or false
      }
    }
  });

STEP 3. – THERE IS NO STEP 3!

That’s it. Happy.js will now validate individual fields on blur events and all fields on submit. If validation fails two things happen:

1. The field will get an unhappy class (yes, I’m quite serious).
2. The field will get a <span> right before it, in the DOM with a class of unhappyMessage and an id of whatever the field’s id is plus _unhappy. For example:

<span id=​"textInput1_unhappy" class=​"unhappyMessage">​Please enter an email​</span>.

So all you have to do is list our your fields and any arbitrary test function for each. There are a few example validation functions built in. If you use underscore.js I’d suggest mixing in your validation functions into underscore like this.
 

AVAILABLE OPTIONS

Top level options are listed below. Only the fields attribute is required.

1. fields (object, see below): The configs for each field with the jquery selector as the key.
2. submitButton (string): If you pass jQuery selector to this the form will be validated when that item is clicked instead of on submit.
3. happy (function): A callback that gets triggered when form submission is attempted and all fields pass validation.
4. unHappy (function): A callback that gets triggered when form submission is attempted but any fields fail validation.
5. errorTemplate (function): Used to generate custom error html instead of the default. Is passed a standard error object as its only parameter (which has id and message attributes). Should return the error message html.
6. when (string: default: ‘blur’): Event on which to reevaluate any field.
7. classes (object, see below): The classes to set on the input fields and error messages for those fields.
8. errorTarget (string): Selector to use in lieu of the input element itself when choosing where to insert the error html. Error html will be inserted .after() this selector

Each field takes the following attributes all optional

1. required (boolean or ‘sometimes’): You can specify that a field is required here, OR… better yet specify it with the HTML5 required attribute like so: <input type="text" required>. Happy.js will detect that too, even in IE6. So either way is fine. Also, you can pass the string `’sometimes’`, to specify that you always want it to run the `test` function to determine validity. Otherwise ‘Happy’ will only validate non-blank values. Passing `’sometimes’` lets you make fields conditionally required.
2. message (string): Message shown in case of an error for this field.
3. test (function): A function that takes the field value as the first argument and returns true or false.
4. arg (anything): An optional second argument that will get passed to the test function. This is useful for comparing with another paramter or whatnot. If this is a function it will be evaluated. This way you can compare it to something that is evaluated at runtime such as what they put in another field or to make a server call to check if a username is available, etc.
5. clean (function): A function that is used to clean the data before it is validated. Note, this also writes the cleaned data back to the field input.
6. trim (boolean, default: true): Password fields are not trimmed, but other field values are trimmed by default. Also, please note that if you pass a clean method it is assumed that you’ll handle any trimming, etc, so the value won’t be trimmed in that case.
7. when (string, default: ‘blur’): Event on which to reevaluate this field. Overrides top level ‘when’ setting for this field.

The classes parameter takes the following attributes all optional

1. field (string, default: ‘unhappy’): Class to apply to the input field on failed validation.
2. message (string, default: ‘unhappyMessage’): Class to apply to the error message for an input that has failed validation.

Contact Us for Training:

WebtechLearning – Web Education Academy
SCO 54-55, 3rd Floor, Sector 34-A, Chandigarh
Mobile: 09915337448, webtechlearning@gmail.com