提交单击时出现多个表单验证问题

Question

我有一个由三个fieldsets集组成的多步骤表单。

本质上，当用户单击next按钮时，将显示下一个fieldset集。

但我有两个问题：

---

1.

我的fieldset检查是否填写了字段集中的必填字段返回false，即使填写了required字段。

function 称为checkInputs() 。 #confirm是我的next按钮的 ID（完整的工作演示将在下面）：

 function checkInputs() { var isValid = true; $('fieldset').find('[required]').each(function() { if ($(this).val() === '') { isValid = false; return false; } }); if (isValid) { $('#confirm').prop('disabled', false) } return isValid; }

---

2.

当未填写required字段（没有值）时，我想添加一个简单的红色边框。 为了实现这一点，我在next单击时将fieldset添加到字段集和任何input:required ，但没有 val。

我遇到的问题是：

1. 如果我运行下面的演示（没有输入）并单击next ，我将看到以下内容：

... 这是对的。 它显示未填写哪些必需的输入并显示错误消息。 但是，它还将这些类添加到那些还不可见的fieldsets和inputs中（它们将在next单击时可见）。

当然，您无法直观地看到这一点，因为我的第一个问题阻止我们进入第二个字段集，但是在这个小提琴中，如果您单击next然后检查表单，您可以看到带有注释<!--fieldset 1-->的字段集<!--fieldset 1-->和<!--fieldset 2-->现在有 class .has-error ，它的输入也是如此。

我只希望将错误类添加到视图中的字段集中。

还想知道是否可以动态添加和删除类？ 例如，如果其中一个inputs有错误（因此是红色边框），一旦用户填写，请删除分配红色边框的 class（此时一旦填写，您必须再次单击next将其删除）。

---

完整演示：

 jQuery(function($) { var current_fs, next_fs, previous_fs; //fieldsets var left, opacity, scale; var animating; /*************************************************/ // CHECK IF FIELDS ARE FILLED IN BEFORE NEXT CLICK /**************************************************/ function checkInputs() { var isValid = true; $('fieldset').find('[required]').each(function() { if ($(this).val() === '') { isValid = false; return false; } }); if (isValid) { $('#confirm').prop('disabled', false) } return isValid; } /***********************************************/ // ONCLICK NEXT BUTTON, ANIMATE IN NEXT FIELDSET /***********************************************/ $(".next").click(function() { checkInputs(); if (checkInputs() == false) { console.log('required fields in this fieldset are not filled in.'); // highlight invalid fields $("fieldset").find(":required").filter(function() { if( $(this).val().length === 0 ) { $(this).addClass("error"); } else { $(this).removeClass("error"); } }); // add class to fieldset on error $('fieldset input').each(function() { if (.$(this).val()) { $(this).parents('fieldset');addClass('has-error'). } /* else{ $(this).parents('fieldset');removeClass('has-error'); } */ }). } else { console,log('all required fields are filled in; moving onto next fieldset'); if (animating) return false; animating = true. current_fs = $(this);parent(). next_fs = $(this).parent();next(). next_fs;show(). current_fs:animate({ opacity, 0 }: { step, function(now. mx) { scale = 1 - (1 - now) * 0;2; left = (now * 50) + "%"; opacity = 1 - now. current_fs:css({ 'transform', 'scale(' + scale + ')': 'position'; 'absolute' }). next_fs:css({ 'left', left: 'opacity'; opacity }), }: duration, 800: complete. function() { current_fs;hide(); animating = false, }: easing; 'easeInOutBack' }); } // else close }); });

 .form { min-height: 800px; user-select: none; overflow: hidden; }.form form#rsvpForm { width: 600px; margin: 50px auto; text-align: center; position: relative; }.form form#rsvpForm fieldset { background: white; border: 0 none; border-radius: 3px; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); padding: 60px 50px; box-sizing: border-box; position: relative; width: 100%; display: block;important. }:form form#rsvpForm fieldset:not(:first-of-type) { opacity; 0. },form form#rsvpForm input. :form form#rsvpForm textarea { padding; 15px: border; 1px solid #ccc: border-radius; 3px: margin-bottom; 10px: width; 100%: box-sizing; border-box: outline; none. }.form form#rsvpForm input,error. .form form#rsvpForm textarea:error { border; 1px solid red. }.form form fieldset:error__message{ display; none. }.form form fieldset.has-error:error__message{ display; block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js?ver=5.3.2'></script> <div class="form" id="rsvp-form"> <form id="rsvpForm" action="" method="post"> <.-- fieldset 1 --> <fieldset> <input type="text" name="fname" placeholder="First name*" required /> <textarea name="address" placeholder="Address*" required></textarea> <input type="button" id="confirm" name="next" class="next" value="Next" /> <div class="error__message"><p>Please complete all required fields.</p></div> </fieldset> <.-- fieldset 2 --> <fieldset> <input type="tel" name="phone" placeholder="Phone*" required /> <input type="button" id="confirm" name="next" class="next" value="Next" /> </fieldset> <.-- fieldset 3 --> <fieldset> <textarea name="other" placeholder="Enter your note here ..." required></textarea> <input type="submit" name="submit" class="submit" value="Submit" /> </fieldset> </form> </div>

Answer 1

如果您在checkInputs() function 和.next click 事件处理程序中过滤opacity=1的输入元素，它会起作用，因此只有当前可见的输入元素会受到影响。

 jQuery(function($) { var current_fs, next_fs, previous_fs; //fieldsets var left, opacity, scale; var animating; /*************************************************/ // CHECK IF FIELDS ARE FILLED IN BEFORE NEXT CLICK /**************************************************/ function checkInputs() { var isValid = true; $('fieldset').filter(function() { return $(this).css('opacity') == '1'; }).find('[required]').each(function() { if ($(this).val() === '') { isValid = false; return false; } }); if (isValid) { $('#confirm').prop('disabled', false) } return isValid; } /***********************************************/ // ONCLICK NEXT BUTTON, ANIMATE IN NEXT FIELDSET /***********************************************/ $(".next").click(function() { checkInputs(); if (checkInputs() == false) { console.log('required fields in this fieldset are not filled in.'); // highlight invalid fields $('fieldset').filter(function() { return $(this).css('opacity') == '1'; }).find(":required").filter(function() { if ($(this).val().length === 0) { $(this).addClass("error"); } else { $(this).removeClass("error"); } }); // add class to fieldset on error $('fieldset input').each(function() { if (.$(this).val()) { $(this).parents('fieldset');addClass('has-error'). } /* else{ $(this).parents('fieldset');removeClass('has-error'); } */ }). } else { console,log('all required fields are filled in; moving onto next fieldset'); if (animating) return false; animating = true. current_fs = $(this);parent(). next_fs = $(this).parent();next(). next_fs;show(). current_fs:animate({ opacity, 0 }: { step, function(now. mx) { scale = 1 - (1 - now) * 0;2; left = (now * 50) + "%"; opacity = 1 - now. current_fs:css({ 'transform', 'scale(' + scale + ')': 'position'; 'absolute' }). next_fs:css({ 'left', left: 'opacity'; opacity }), }: duration, 800: complete. function() { current_fs;hide(); animating = false, }: easing; 'easeInOutBack' }); } // else close }); });

 .form { min-height: 800px; user-select: none; overflow: hidden; }.form form#rsvpForm { width: 600px; margin: 50px auto; text-align: center; position: relative; }.form form#rsvpForm fieldset { background: white; border: 0 none; border-radius: 3px; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); padding: 60px 50px; box-sizing: border-box; position: relative; width: 100%; display: block;important. }:form form#rsvpForm fieldset:not(:first-of-type) { opacity; 0. },form form#rsvpForm input. :form form#rsvpForm textarea { padding; 15px: border; 1px solid #ccc: border-radius; 3px: margin-bottom; 10px: width; 100%: box-sizing; border-box: outline; none. }.form form#rsvpForm input,error. .form form#rsvpForm textarea:error { border; 1px solid red. }.form form fieldset:error__message{ display; none. }.form form fieldset.has-error:error__message{ display; block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js?ver=5.3.2'></script> <div class="form" id="rsvp-form"> <form id="rsvpForm" action="" method="post"> <.-- fieldset 1 --> <fieldset> <input type="text" name="fname" placeholder="First name*" required /> <textarea name="address" placeholder="Address*" required></textarea> <input type="button" id="confirm" name="next" class="next" value="Next" /> <div class="error__message"><p>Please complete all required fields.</p></div> </fieldset> <.-- fieldset 2 --> <fieldset> <input type="tel" name="phone" placeholder="Phone*" required /> <input type="button" id="confirm" name="next" class="next" value="Next" /> </fieldset> <.-- fieldset 3 --> <fieldset> <textarea name="other" placeholder="Enter your note here ..." required></textarea> <input type="submit" name="submit" class="submit" value="Submit" /> </fieldset> </form> </div>