CODEWITHSUNDEEP
ajaxvalidationjquery
Behseini
Behseini

Reputation: 6330

Cant Validate Ajax Form When it Wrapped in <form> Tags

Can you please take a look at this link and let me know why I cant' validate the form when it is wrapped in a <form> ... </form> tag?
As you can see from the code I can validate it when is is declared only inside the <fieldset> </fieldset> I tried to move the id="contact_form" into the form tag as:

<form id="contact_form">

but it didn't work either! As I said I can do the process without the <form> but I have to add my style from Bootstrap 3 framework as:

<form class="form-inline" role="form" id="contact_form">

Here is my whole HTML code:

<form class="form-inline" role="form" id="contact_form">
<fieldset id="contact_form">
<legend>My Contact Form</legend>
    <div id="result"></div>
    <label for="name"><span>Name</span>
    <input type="text" name="name" id="name" placeholder="Enter Your Name" />
    </label>

    <label for="email"><span>Email Address</span>
    <input type="text" name="email" id="email" placeholder="Enter Your Email" />
    </label>

    <label for="phone"><span>Phone</span>
    <input type="text" name="phone" id="phone" placeholder="Phone Number" />
    </label>

    <label for="message"><span>Message</span>
    <textarea name="message" id="message" placeholder="Enter Your Name"></textarea>
    </label>

    <label><span>&nbsp;</span>
    <button class="submit_btn" id="submit_btn">Submit</button>
    </label>
</fieldset>
</form>

Upvotes: 1

Views: 55

Answers (1)

Howard Renollet
Howard Renollet

Reputation: 4739

You have to prevent the default behavior of the submit button inside of the form tag. I think this is what you're looking for:

http://jsfiddle.net/9LFVX/1/

        $("#submit_btn").click(function(e) { 
            e.preventDefault();
            //get input field values
            var user_name       = $('input[name="name"]').val(); 
            var user_email      = $('input[name="email"]').val();
            var user_phone      = $('input[name="phone"]').val();
            var user_message    = $('#contact_form textarea').val();

            //simple validation at client's end
            //we simply change border color to red if empty field using .css()
            var proceed = true;
            if(user_name==""){ 
                $('input[name="name"]').css('border-color','red'); 
                proceed = false;
            }
            if(user_email==""){ 
                $('input[name="email"]').css('border-color','red'); 
                proceed = false;
            }
            if(user_phone=="") {    
                $('input[name="phone"]').css('border-color','red'); 
                proceed = false;
            }
            if(user_message=="") {  
                $('#contact_form textarea').css('border-color','red'); 
                proceed = false;
            }

Upvotes: 1

Related Questions