Hi Stephen,
Try using input type="button" instead of "submit" as per my example
below. Excuse the aspx :).
register.aspx code.
string usrName = Request["userName"];
Response.Clear();
Response.Write("Hello " + usrName);
Response.End();
-- client side code and html
<script type="text/javascript">
$(document).ready(function() {
$("form").validate();
$("#userName").rules("add",
{
required: true,
messages: { required: "User Name is required." }
});
$("#submitForm").click(function() {
if ($("form").valid()) {
$.post("register.aspx", $("form").serialize(), function
(data, status) { $("#message").text(data) }, "text")
}
});
});
</script>
<body>
<div id="message"></div>
<form id="dataForm">
<table>
<tr>
<td><label>User Name:</label></td>
<td><input type="text" id="userName" name="userName" value=""/></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="submitForm" name="submitForm"
value="Submit" /></td>
</tr>
</table>
</form>
</body>
--- end of client side code and html
On Nov 5, 7:41 am, StephenJacob <turnstylecreat...@gmail.com> wrote:
> Just to clarify, the $.post function works perfectly and returns my
> json results. Due to the limitations of the validation system i was
> using (no remote options) i had to begin using the standard
> jquery .validate library.
>
> Please help me understand how to implement the .Validate w/ my HTML
> form.
>
> As you can see the $.post option has the process.php written in the
> Jquery and leaves the HTML form action blank. With the
> Jquery .Validate, I need to define the process.php as the Action
> correct? If so, why does the form continue to submit normally?
>
> Thanks for all the help everyone! I think with a bit more guidance
> i'll have a really strong understanding of the validation system.
>
> On Nov 4, 3:33 pm, StephenJacob <turnstylecreat...@gmail.com> wrote:
>
> > @Leonard, unfortunately it's not due to the function argument.
>
> > @Dylan, I've looked at this tutorial a few times. It's not using the
> > official Jquery Validate system and hasn't been able to help me fill
> > in any gaps in my learning curve... It seems that every tutorial has
> > their own convoluted system to doing validation.. And the ones that do
> > use the standard validation system none of them thoroughly explain the
> > form submission part.
>
> > This is my current working Validation code + Submit function that does
> > not work properly. It post the page normally, like any HTML form
> > would.
>
> > $(document).ready(function(){
>
> > $("#contactForm").validate({
>
> > rules: {
> > fullname: {
> > required: true,
> > minlength: 2
> > },
> > email: {
> > required: true,
> > email: true
> > },
> > company: {
> > required: true,
> > minlength: 2
> > },
> > phone: {
> > required: true,
> > minlength: 2
> > },
>
> > },
> > messages: {
> > fullname: '<span class="error">Please enter your
> > <b>full name</b>.</
> > span>',
> > email: '<span class="error">Please enter a valid
> > <b>email address</
> > b>.</span>',
> > company: '<span class="error">Please enter your
> > <b>company</b>.</
> > span>',
> > phone: '<span class="error">Please enter your
> > <b>phone number</b>.</
> > span>'
> > },
> > submitHandler: function() {
> > form.submit();
> > }
> > });
>
> > });
>
> > // HTML FORM
>
> > <form id="contactForm" method="POST" action="process.php">
> > //Stuff goes here
> > </form>
>
> > // WORKING VALIDATION USING LIMITED VALIDATION SYSTEM
>
> > $(document).ready(function(){
>
> > $("#signupForm #submit").click(function(){
>
> > $(".error").hide();
> > var hasError = false;
> > var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
>
> > var regarding_Val = $("#regarding").val();
> > var message_Val = $("#message").val();
> > var subcontact = $("#subcontact").val();
>
> > var fullname_Val = $("#fullname").val();
> > if(fullname_Val == '') {
> > $("#fullname").after('<span class="error">Please
> > enter your full
> > name.</span>');
> > hasError = true;
> > }
>
> > var company_Val = $("#company").val();
> > if(company_Val == '') {
> > $("#company").after('<span class="error">Please
> > enter your
> > company.</span>');
> > hasError = true;
> > }
>
> > var phone_Val = $("#phone").val();
> > if(phone_Val == '') {
> > $("#phone").after('<span class="error">Please enter
> > a phone
> > number.</span>');
> > hasError = true;
> > }
>
> > var email_Val = $("#email").val();
> > if(email_Val == '') {
> > $("#email").after('<span class="error">Please enter
> > an email
> > address.</span>');
> > hasError = true;
> > } else if(!emailReg.test(email_Val)) {
> > $("#email").after('<span class="error">Please enter
> > a valid email
> > address.</span>');
> > hasError = true;
> > }
>
> > if(hasError == false) {
>
> > $.post("process.php",
> > $("#signupForm").serialize(),
> > function(data){
> >
> > $('#signupForm').clearForm();
> > if (data.success) {
> >
> > $("#success").html(data.message);
> > }
> > },
> > "json"
> > );
> > }
> > return false;
> > });
>
> > });
>
> > On Oct 29, 6:22 am, Dylan <dylan.h...@gmail.com> wrote:
>
> > > Have a look at some of the ideas from this
> > > ...http://tutorialzine.com/2009/09/fancy-contact-form/
>
> > > On Oct 27, 8:16 pm,StephenJacob<turnstylecreat...@gmail.com> wrote:
>
> > > > Leonardo, I've been looking into the submitHandler option but i'm
> > > > having problems getting it to work correctly. Here is a sample of the
> > > > code i'm testing.
>
> > > > $("#signupForm").validate({
>
> > > > rules: {
> > > > fullname: "required",
> > > > company: "required",
> > > > phone: "required",
> > > > email: {
> > > > required: true,
> > > > email: true
> > > > }
> > > > },
> > > > messages: {
> > > > fullname: "Please enter your fullname",
> > > > company: "Please enter a company name",
> > > > phone: "Please enter a phone number",
> > > > email: "Please enter a valid email address"
> > > > },
> > > > submitHandler: function() {
> > > > form.submit();
> > > > }
>
> > > > });
>
> > > > <form class="cmxform" id="signupForm" method="POST"
> > > > action="process.php">
> > > > <div class="formline">
> > > > <label for="fullname">* Name:</label>
> > > > <input type="text" id="fullname" name="fullname"
> > > > class="textbox" />
> > > > </div>
> > > > <div class="formline">
> > > > <label for="company">* Company:</label>
> > > > <input type="text" name="company" id="company"
> > > > class="textbox" />
> > > > </div>
> > > > <div class="formline">
> > > > <label for="email">* Email:</label>
> > > > <input type="text" name="email" id="email" class="textbox" />
> > > > </div>
> > > > <div class="formline">
> > > > <label for="phone">* Phone:</label>
> > > > <input type="text" name="phone" id="phone" class="textbox" />
> > > > </div>
> > > > <div class="formline">
> > > > <label for="message">Message:</label>
> > > > <textarea name="message" id="message" class="messagebox"></
> > > > textarea>
> > > > </div>
> > > > <div class="formline">
> > > > <label for="button"></label>
> > > > <input type="submit" value="Submit" alt="Send Message" />
> > > > <input type="hidden" name="subcontact" value="1" />
> > > > </div>
> > > > </form>
>
> > > > On Oct 27, 1:42 pm, Leonardo K <leo...@gmail.com> wrote:
>
> > > > > Look the submitHandler option:
>
> > > > >http://docs.jquery.com/Plugins/Validation/validate#toptions
>
> > > > > On Tue, Oct 27, 2009 at
> > > > > 15:02,StephenJacob<turnstylecreat...@gmail.com>wrote:
>
> > > > > > I'm trying to create a contact form using Jquery Validation and Ajax
> > > > > > Submit. I'm having a problem figuring out the best way to submit the
> > > > > > results to a php file. Below is a break down of my validation code.
>
> > > > > > $().ready(function(){
>
> > > > > > $("#signupForm").validate({
>
> > > > > > rules: {
> > > > > > fullname: "required",
> > > > > > company: "required",
> > > > > > phone: "required",
> > > > > > email: {
> > > > > > required: true,
> > > > > > email: true
> > > > > > }
>
> ...
>
> read more »
