javascript - 提交和更改 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 字符串的函数替换。