Question

我会尝试解释我的问题：我有一个表格（我可以做第二个，但我想要一个）。我想验证表格使用 HTML5 或 Jquery插件进行验证，问题是：

其中一个表单字段适用于注册用户，另一个表单字段适用于新用户。所以我需要检测有效的表格或集中注意力？因为HTML5要验证完整的表单。你是如何解决这个问题的？顺便说一句：我正在使用Bootstrap 3。

对于Exp：

<div class="col-md-12 well">
            <div class="col-md-6">
                 <form id="checkout-login" action="" method="post">  
            <h3>Existing User</h3>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text" class="input-fancy" id="email" placeholder="E-mail" name="email" required="required" autocomplete="on">
                </div>
                <div class="form-group">
                    <label for="password">Heslo</label>
                    <input type="text" class="input-fancy" id="password" placeholder="********" name="password" required="required" autocomplete="off">
                </div>
             </div>
            <div class="col-md-6">
             <h3>New user</h3>
                <div class="form-group">
                    <label for="Name">Name</label>
                    <input type="text" class="input-fancy" id="name" placeholder="Name" name="name" required="required" autocomplete="on">
                </div>
                <div class="form-group">
                    <label for="surname">Surname</label>
                    <input type="text" class="input-fancy" id="surname" placeholder="Priezvisko" name="surname" required="required" autocomplete="on">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text" class="input-fancy" id="email" placeholder="E-Mail" name="email" required="required" autocomplete="on">
                </div>
                <div class="form-group">
                    <label for="password">Heslo</label>
                    <input type="text" class="input-fancy" id="password" placeholder="********" name="password" required="required" autocomplete="off">
                </div>
                 </div>
           <input type="submit" class="btn btn-green btn-lg" value="Pokračovať"></input>
            </form>

         </div>

JQuery，请帮助我**，你可以忽略//

  $(document).ready(function () {
     $("form").submit(function (e) { e.preventDefault() });
    if(**find valid form){
    $("**then $(this) is valid --> send").submit(function (e) {
        e.preventDefault();
        $.ajax({
            url: '',
            data: //my custom,
            success: function (data) {
                //Show Thank you
            },
            cache: false
        });
    });
   }else{
     //Show alert please register or login
   }
});

感谢您的任何回答，建议或评论。

Answer 1

这里是验证插件jquery validate demo，我将它与bootstrap一起使用。它有很多自定义选项。如果您从头开始构建新的东西，那么这是一个很好的选择，当您尝试将其集成到具有大量现有标记的现有应用程序时。该插件捆绑了一组有用的验证方法，包括URL和电子邮件验证，同时提供API来编写自己的方法。所有捆绑方法都带有英语的默认错误消息，并翻译成37个语言环境。

代码可在https://github.com/jzaefferer/jquery-validation

上找到

如何验证一个大表格

1 个答案: