Jquery form validation without using plugin

I would like to make my own jquery validation, that checks for empty input fields/select/textareas and allows me to configure my own regexs.
The reason I can't use the Jquery validation plugin is because I need to embed the error messages in the form itself (as hidden <p>) so all I want it do is display the error message and append an error class to the input/select/textarea.

Thanks
Al4ddin2Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
I've been using this jquery plugin for quite some time:
jquery-plugin-validation

Basically it let's you do what you want if you configure it to.
More specifically, this demo seams to do exactly what you want:
errorcontainer-demo

I can guide you through the process of writing your own validation tool but if your problem is only what you describe then maybe you don't need to go through the trouble.

Cheers!
0
Al4ddin2Author Commented:
That is my only problem.
If I can set the error messages in the form itself rather that in the JS then I am happy to use the plugin.

Thanks
0
Alexandre SimõesManager / Technology SpecialistCommented:
Ah, sorry, I misunderstood you. Of course you can.
Have a look at the plugin Documentation, specifically at the messages option.
They're example shows something like:
$(".selector").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please specify your name",
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
}
}
});

Open in new window


That you can change for something like:
$(".selector").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: function() { return $('input#ErrorPlaceholder1').val(); },
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
}
}
});

Open in new window

And on the HTML have:
<input id="ErrorPlaceholder1" type="hidden" value="My custom error message" />

Open in new window


This is NOT the optimal solution, you should read the value from the input into a variable and use that variable on the validation, but it's just to show how flexible javascript can be.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Al4ddin2Author Commented:
Hi,

Thanks but I have managed to find this validation plugin that allows for the validation message to be set in the form so more optimised for what I am looking for.

http://formvalidator.net/

Thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.