javascript - 如何验证一张大表格

Question

我会尝试解释我的问题: 我有一种形式(我可以制作第二种，但我想要一种)。我想使用 HTML5 或通过 Jquery 验证插件来验证表单，问题是:

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

对于经验:

<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上获取