提交併更改jquery代碼重寫

此代碼確定表單元素輸入字段，單選按鈕和選擇字段都有一個叫做required =「required」的屬性，然後jquery並相應地添加一個錯誤。提交併更改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{ 
 
\t 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>

來源

2016-01-11 Sophie Rhodes

您可以使用'.find（'：input [required]'）'而不是'if（$（this）.attr（「required」））''。 – Barmar

codereview.stackexchange.com是詢問有關改進正常工作的代碼風格的首選站點。 SO主要用於獲取非工作代碼的幫助。 – Barmar

$("form")[0].checkValidity()檢查在現代瀏覽器形式的有效性：P 除此之外，它的的確建議發佈此的代碼審查。有很多改進，嵌套的ifs太多，代碼中的完整html變量可以用返回具有類名和文本值輸入的html字符串的函數替換。

來源

2016-02-12 10:20:56 seahorsepip

提交併更改jquery代碼重寫

回答

相關問題