I have been working hard on getting 1.4 out of the door, this is the latest development I made, and a small bonus in this article, the geekiest thing you ever saw!

I will create demos and more documentation about these features soon. I didn’t have time lately, but they are already up for grabs in the project page.

Validation prompt positioning

Positioning is not perfect, it is a good start but much work is needed to have it working in every situation, when you call the plug-in on the DOM ready, change this setting.

$("#formID").validationEngine({
promptPosition: "topRight",	// OPENNING BOX POSITION, IMPLEMENTED: topLeft, topRight, bottomLeft,  centerRight, bottomRight
success :  false,
failure : function() {
})

Ajax Submit

This is a cool feature that I wanted to implement for sometimes now but did not get the time or the inspiration to implement it. The Ajax success function can still be called and will be executed after the Ajax submit validation occurs.

$("#formID").validationEngine({
	ajaxSubmit: true,
		ajaxSubmitFile: "ajaxSubmit.php",
		ajaxSubmitMessage: "Thank you, we received your inscription!",
	success :  false,
	failure : function() {}
})

In your PHP, if the form validates, the variable $isValidate needs to be set to true, the form will disappear and the success message will appear instead. If it does not validate set $isValidate to false, follow this syntax to call an array of errors :

$arrayError[0][0] = "#email";			// FIELDID 
$arrayError[0][1] = "Your email do not match.. whatever it need to match"; 	// TEXT ERROR	
$arrayError[0][2] = "error";			// BOX COLOR

My validation engine now weight a good 25kb, this is 15kb more than the initial release! This also means I will become more careful when implementing new features, I do not want to ever pass the 30kb. I am afraid I will began losing myself in it.

I created this plug-in because other plug-in did not satisfy my needs, I needed a plug-in that could be implemented fast with no hassle, have a small file size and was looking great. I do not want to lose the sight of these with lots of options that will become difficult to maintain in future versions.

Now for the geekiest thing.. take a look at exhibit A below, this is.. me, of course, with a jQuery t-shirt. Wait you never saw this t-shirt before? This is because I created it myself on a T-shirts website and got it delivered to myself. I dare you to do something geekier! I actually wear it by the way.

19 thoughts on “Form engine validation 1.3.9.5 with prompt positionning and ajax submit

  1. One little thing I noticed. Not a huge issue, but if you have a form field near the top of the screen and the error messages are being displayed above the field, the error message will appear off the top of the page.

    Haven’t tested in this latest version, but it did it with the previous one.

  2. Just a small question, I am rather new at this. How do I make a file upload a requires element? Sorry, it just evades me.

  3. @Chuy A good question, i would think that your uploading script would provide a way to callback an error, there is nothing in my script for uploading, and there is already really good scripts for this.

  4. I have a script on my site that adds the input name directly into the form field. The HTML is

    your name

    The class “overlay” calls the script.

    My problem is when trying to combine this with your script it breaks. Can two scripts that target the input in this way be combined?

  5. HTML missing from original post.

    label class=”overlay” for=”inputName” your name /label
    input type=”text” name=”Name” id=”inputName”

  6. Love you work!!.
    Just one question. How do I stop the screen scrolling to the popup error and aligning it to the top of the page. Can I turn this off? I just need the validation to display & not scroll.

  7. @Strober Good point, there is no option for that, yet, but this is easy to implement,

    for now just delete the scrolltop line around the end of the JS file.

  8. My form keeps submiting everytime I push the submit button. The messages only show up when a textfield loses its focus. 🙁

    I copy & pasted the $(document).validationEngine part into a and my form has the id “formID”. Using input type “submit”, not “button”.

  9. email validation is not working properly.
    it doesnot displaying the error msg when we are entering the email without domain like .com or .co.in

  10. Hi I am using (“#formID”).validationEngine twice for two forms. Now the two forms are displayed in two different tabs with different formID’s . The issue is that i am getting ajax submit message on one tab and not on other. Although form submission is working on both.

Comments are closed.