驱动程序注册HTML表单的Jquery验证

Question

您可以通过jquery制作一个不提交刷新的html。问题是我是初学者，我不知道如何为html表单添加验证。我需要在脚本中进行更改，因此第一个表单将通过jquery或ajax进行验证然后它将通过jquery提交以及页面刷新...查看我的代码。请提供我的工作解决方案，第一个表单由ajax jquery验证，然后由jquery提交，无需刷新..提前感谢

JQUERY：

<script type="text/javascript"> 
$(document).ready(function(){
    $("form#form").submit(function() {
    // we want to store the values from the form input box, then send via ajax below
var uno = $("#uno").val();
var name = $("#name").val();
var licence = $("#licence").val();
var email = $("#email").val();
var phone = $("#phone").val();
var dataString =  'uno=' + uno + '&name=' + name + '&licence=' + licence + '&email=' + email + '&phone=' + phone;


        $.ajax({
            type: "POST",
            url: "addd.php",
            data: dataString,
            success: function(){
                 $('form#form').hide(function(){$('div.success').fadeIn();});
            }
        });
    return false;
    });
});
</script>

HTML表格：

<form id="form" method="post" name="form" action=""> 
              <fieldset id="opt">

                        <legend>Driver Information</legend>

                        <label for="choice">Name : </label>
                        <input type="text" id="name" name="name" value=""> <br />
                        <label for="choice">Licence No : </label>
                        <input type="text" id="licence" name="licence" value=""> <br />
                        <label for="choice">Email : </label>
                        <input type="text" id="email" name="email" value=""> <br />
                        <label for="choice">Phone : </label>
                        <input type="text" id="phone" name="phone" value=""> <br />


                       <input type="hidden" name="uno" id="uno" value="" /> 
                        <br />
                         </fieldset>
                      <div align="center">

                       <input id="button2" type="submit" value="Add Driver" />  
                      <input id="button2" type="reset" />
                      </div>
                    </form>

Answer 1

我在HTML表单上也发现了多个错误/错误。其中一些我想提一下..

• for label属性具有下一个输入/选择ID的相同值，请阅读：

  http://www.w3schools.com/tags/att_label_for.asp

• 不要为name和id属性分配名称，这会产生误导。（良好做法）

• 如果您没有输入框的初始值，请不要写value =""。
• 如果你想验证一个隐藏字段，那么在表格初始化中为它写一些值，否则它总是空的，你的验证永远不会有效。

• 如果您想要同时验证所有输入字段是否为空，请使用:input选择器，阅读：

  http://api.jquery.com/input-selector/

• 不要忘记验证电子邮件地址

• 如果您想通过ajax发布表单，则无需在表单中填写method和action属性
• 您的重置按钮应该有一些值，否则它采用默认值。

---

一个非常有用且方便的新手jquery ajax验证文章

http://jorenrapini.com/blog/css/jquery-validation-contact-form-with-modal-slide-in-transition

或者您可以使用jquery验证器插件：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

这是你整洁干净的表格

<form id="driverForm" name="driverForm"> 
    <fieldset id="opt">
        <legend>Driver Information</legend>
        <label for="lname">Name : </label>
        <input type="text" id="lname" name="lname" > <br />
        <label for="licence">Licence No : </label>
        <input type="text" id="licence" name="licence" ><br />
        <label for="email">Email : </label>
        <input type="text" id="email" name="email" ><br />
        <label for="phone">Phone : </label>
        <input type="text" id="phone" name="phone" > <br />
        <input type="hidden" name="uno" id="uno"  /><br />
    </fieldset>
    <div align="center">
        <input type="submit"  id="submitForm" name="submitForm" value="Add Driver" />  
        <input type="reset" value="clear" />
    </div>
</form>

希望这对你有用。

更新

将insdie submit()置于ajax之前

$("form").submit(function() {
if($('#lname').val() == '')
            return false;
});

$.ajax({

注意：不要创建dataString手动jQuery中有内置函数。

serialize

请注意，这不是您的表单提交与否。最重要的是它是否有效。

乐意提供帮助：）