提交并更改jquery代码重写

Question

此代码确定表单元素（例如输入字段，单选按钮和选择字段）是否具有名为required =“required”的属性，然后是jquery并相应地添加错误。

如果输入字段有值，则更改侦听器应自动删除错误。

代码工作正常 - 但是，它编写得不好。 有很多事情在重复。

优化代码的最佳方法是什么？

 $(document).ready(function() { var count = 0; $(".form-unique").attr('novalidate', ""); $('.form-unique').on('submit change', function(e) { if (count > 0) { $(this).find('.error-message').remove(); e.preventDefault(); console.log($('.supererror').length); var dateField = $(".form-unique").find('#date-year').parent(); var _this = $(this); var checkboxes = []; _this.find(':input').each(function(i, val) { $(this).css('border', 'transparent'); if ($(this).attr('required')) { if ($(this).val() != '') { $(this).removeClass('supererror'); if ($(this).attr('type') == "checkbox" || $(this).attr('type') == "radio") { var checkboxName = $(this).attr('name'); if (checkboxes.indexOf(checkboxName) == -1) { checkboxes.push(checkboxName); var selector = "input:checked[type='radio'][name='" + $(this).attr('name') + "']"; if ($(selector).length == 0) { $(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>'); } } } } else { var superb = $(this).closest('div').find('label').text(); superb = superb.replace(/\\*/g, '').replace(/\\:/g, ''); $("input[type='checkbox'][name='submitted[yes_no]']").change(function() { $(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>'); }); $(this).addClass('supererror').css('border', '3px solid red'); $(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>'); } } }); } }); $('.form-unique').on('submit', function(e) { count++; if (count == 1) { $(this).find('.myaccount-invalid-email-content').remove(); e.preventDefault(); console.log($('.supererror').length); var _this = $(this); var checkboxes = []; _this.find(':input').each(function(i, val) { $(this).css('border', 'transparent'); if ($(this).attr('required')) { if ($(this).val() != '') { $(this).removeClass('supererror'); if ($(this).attr('type') == "checkbox" || $(this).attr('type') == "radio") { var checkboxName = $(this).attr('name'); if (checkboxes.indexOf(checkboxName) == -1) { checkboxes.push(checkboxName); var selector = "input:checked[type='radio'][name='" + $(this).attr('name') + "']"; if ($(selector).length == 0) { $(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>'); } } } } else { var superb = $(this).closest('div').find('label').text(); superb = superb.replace(/\\*/g, '').replace(/\\:/g, ''); $("input[type='checkbox'][name='submitted[yes_no]']").change(function() { $(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>'); }); $(this).addClass('supererror').css('border', '3px solid red'); $(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>'); if ($(".moving-out-date-year").val() == "" || $(".moving-out-date-month").val() == "" || $(".moving-out-date-day").val() == "") { $(".form-unique").find('.moving-out-date-year').parent().find(".myaccount-invalid-email-content").remove(); $(".form-unique").find('.moving-out-date-year').parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>'); } else { $(".form-unique").find('.moving-out-date-year').parent().find(".myaccount-invalid-email-content").remove(); } } } }); } if ($('.supererror').length == 0) { $('.form-unique').off(); $('.form-unique').submit(); } }); }); 

 .supererror{ border: 3px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <form action="/" novalidate="" class="form-unique"> <div class="main-content"> <div class="new-markup"> <h3>Your contact details</h3> </div> <div class="name"> <label for="name">Full name: <span class="form-required">*</span></label> <input id="name" required="required" type="text" name="submitted[name]" value="" class="form-text required"/> </div> <div class="new-e-mail-1"> <label for="e-mail-1">Email address: <span class="form-required">*</span></label> <input id="e-mail-1" required="required" type="text" name="submitted[new_e_mail_1]" value="" class="form-text required"/> </div> <div class="phone-1"> <label for="phone-1">Phone number: <span class="form-required">*</span></label> <input id="phone-1" required="required" type="text" name="submitted[phone_1]" value="" class="form-text required"/> </div> <div class="webform-component-markup moving-out"> <h3>Moving out</h3> </div> <div class="address-line-1"> <label for="address-line-1">House name/number: <span class="form-required">*</span></label> <input id="address-line-1" required="required" type="text" name="submitted[address_line_1]" value="" class="form-text required"/> </div> <div class="address-line-2"> <label for="address-line-2">Street: <span class="form-required">*</span></label> <input id="address-line-2" required="required" type="text" name="submitted[address_line_2]" value="" class="form-text required"/> </div> <div class="town-city"> <label for="town-city">District: </label> <input id="town-city" type="text" name="submitted[town_city]" value="" class="form-text"/> </div> <div class="city"> <label for="city">City: </label> <input id="city" type="text" name="submitted[city]" value="" class="form-text"/> </div> <div class="postcode2"> <label for="postcode2">Postcode: </label> <input id="postcode2" type="text" name="submitted[postcode2]" value="" class="form-text"/> </div> <div class="webform-component-markup moving-date"> <h3>date</h3> </div> <div class="webform-component-date moving-out-date"> <label for="moving-out-date">Moving out date: <span class="form-required">*</span></label> <div class="webform-container-inline webform-datepicker"> <label for="moving-out-date-year" class="element-invisible">Year </label> <select id="moving-out-date-year" required="required" name="submitted[moving_out_date][year]" class="year form-select"> <option value="" selected="selected">Year</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> </select> <label for="moving-out-date-month" class="element-invisible">Month </label> <select id="moving-out-date-month" required="required" name="submitted[moving_out_date][month]" class="month form-select"> <option value="" selected="selected">Month</option> <option value="1">Jan</option> <option value="2">Feb</option> <option value="3">Mar</option> <option value="4">Apr</option> <option value="5">May</option> <option value="6">Jun</option> <option value="7">Jul</option> <option value="8">Aug</option> <option value="9">Sep</option> <option value="10">Oct</option> <option value="11">Nov</option> <option value="12">Dec</option> </select> <label for="moving-out-date-day" class="element-invisible">Day </label> <select id="moving-out-date-day" required="required" name="submitted[moving_out_date][day]" class="day form-select"> <option value="" selected="selected">Day</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> <input id="dp1452155277044" type="image" src="/sites/all/modules/contrib/webform/images/calendar.png" alt="Open popup calendar" title="Open popup calendar" class="webform-calendar webform-calendar-start-2015-12-24 webform-calendar-end-2021-01-07 webform-calendar-day-0 hasDatepicker"/> </div> </div> <div class="webform-component-markup new-address"> <h3>New address</h3> </div> <div class="addressnew-line-1"> <label for="addressnew-line-1">House name/number: </label> <input id="addressnew-line-1" type="text" name="submitted[addressnew_line_1]" value="" class="form-text"/> </div> <div class="addressnew-line-2"> <label for="addressnew-line-2">Street: </label> <input id="addressnew-line-2" type="text" name="submitted[addressnew_line_2]" value="" class="form-text"/> </div> <div class="town-city-new"> <label for="town-city-new">District: </label> <input id="town-city-new" type="text" name="submitted[town_city_new]" value="" class="form-text"/> </div> <div class="county-new"> <label for="county-new">City: </label> <input id="county-new" type="text" name="submitted[county_new]" value="" class="form-text"/> </div> <div class="postcode3"> <label for="postcode3">Postcode: </label> <input id="postcode3" type="text" name="submitted[postcode3]" value="" class="form-text"/> </div> <div class="webform-component-markup take-us-with-you"> <h3>Take us with you</h3> </div> <div> <label for="yes-no">yes?: </label> <div id="yes-no" class="form-radios webform-radio-buttons"> <input id="yes-no-1" type="radio" name="submitted[yes_no]" value="1" class="webform-radio-buttons form-radio"/> <label for="yes-no-1" class="option">No </label> <input id="yes-no-2" type="radio" name="submitted[yes_no]" value="2" class="webform-radio-buttons form-radio"/> <label for="yes-no-2" class="option">Yes </label> </div> </div> <div class="form-actions"> <input type="submit" name="op" value="Submit" class="webform-submit button-primary form-submit"/> </div> </div> </form> 

Answer 1

$("form")[0].checkValidity()检查现代浏览器的表单有效性：P除此之外，确实建议将其发布在codereview上。 有足够的改进，代码中有太多ifs嵌套的完整html变量，可以用返回带有类名和文本值输入的html字符串的函数替换。