当 Ajax 表单包装在标签中时无法验证它<form>

Question

你能看看这个链接，让我知道为什么我不能在表格包装在<form> ... </form>标签中时验证它？
正如您从代码中看到的那样，我可以验证它何时仅在我尝试将id="contact_form"移动到表单标签中<fieldset> </fieldset>内声明为：

<form id="contact_form"> 

但它也没有用！正如我所说，我可以在没有<form>的情况下完成该过程，但我必须从 Bootstrap 3 框架中添加我的样式，如下所示：

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

这是我的整个 HTML 代码：

<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>

Answer 1

您必须阻止表单标签内提交按钮的默认行为。 我认为这就是你要找的：

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;
            }