我無法進行表單驗證

Question

我有可以正常工作的JavaScript表單驗證，但是我需要驗證表單中的某些內容，否則我有一個收音機，是的，如果沒有選擇，則彈出另一個框，但是我需要它，如果他們單擊“是”，則輸入的內容也是必需的。 這就是我的全部代碼：

$(document).ready(function(){
  //$( "#datepicker" ).datepicker();

  //global vars
  var form = $("#closecall");
  var datepicker = $("#datepicker");
  var datepicker_info = $("#datepicker_info");
  var hr = $("#hr");
  var min = $("#min");
  var project = $("#project");
  var project_info = $("#project_info");
  var des_event = $("#event");
  var event_info = $("#event_info");
  var happened = $("#happened");
  var happened_info = $("#happened_info");
  var about = $("#about_it");
  var about_info = $("#about_info");
  var organisation = $("#organisation");
  var organisation_info = $("#organisation_info");
  var region = $("#region");
  var region_info = $("#region_info");
  var rules = $(".rules");
  var liferules = $("#liferules");
  var rules_info = $("#rules_info");
  var end_info = $("#end_info");

  //On blur
  datepicker.blur(validateDatepicker);
  project.blur(validateProject);
  des_event.blur(validateEvent);
  happened.blur(validateHappened);
  about.blur(validateAbout);
  organisation.blur(validateOrganisation);
  region.blur(validateRegion);
  liferules.blur(validateLiferules);

  //On key press
  datepicker.keyup(validateDatepicker);
  project.keyup(validateProject);
  des_event.keyup(validateEvent);
  happened.keyup(validateHappened);
  about.keyup(validateAbout);
  organisation.keyup(validateOrganisation);
  region.keyup(validateRegion);
  liferules.keyup(validateLiferules);

  //On Submitting
  form.submit(function(){
    if(validateDatepicker() & validateProject() & validateEvent() & validateHappened() & validateAbout() & validateOrganisation() & validateRegion() & validateLiferules()){
      $("#submit").prop("disabled", true);
      $("#submit").prop("value", "Sending...");
      end_info.removeClass("info_error");
      return true;
    }else{
      return false;
    }
  });

  //validation functions
  function validateDatepicker(){
    //it's NOT valid
    if(datepicker.val().length < 1){
      datepicker.addClass("error");
      hr.addClass("error");
      min.addClass("error");
      datepicker_info.addClass("info_error");
      end_info.addClass("info_error");

      return false;
    }
    //it's valid
    else{
      datepicker.removeClass("error");
      hr.removeClass("error");
      min.removeClass("error");
      datepicker_info.removeClass("info_error");
      end_info.removeClass("info_error");
      return true;
    }
  }

  function validateProject(){
    //it's NOT valid
    if(project.val().length < 1){
      project.addClass("error");
      project_info.addClass("info_error");
      end_info.addClass("info_error");
      return false;
    }
    //it's valid
    else{
      project.removeClass("error");
      project_info.removeClass("info_error");
      end_info.removeClass("info_error");
      return true;
    }
  }

  function validateEvent(){
    //it's NOT valid
    if(des_event.val().length < 1){
      des_event.addClass("error");
      event_info.addClass("info_error");
      end_info.addClass("info_error");
      return false;
    }
    //it's valid
    else{
      des_event.removeClass("error");
      event_info.removeClass("info_error");
      return true;
    }
  }

  function validateHappened(){
    //it's NOT valid
    if(happened.val().length < 1){
      happened.addClass("error");
      happened_info.addClass("info_error");
      end_info.addClass("info_error");
      return false;
    }
    //it's valid
    else{
      happened.removeClass("error");
      happened_info.removeClass("info_error");
      return true;
    }
  }

  function validateAbout(){
    //it's NOT valid
    if(about.val().length < 1){
      about.addClass("error");
      about_info.addClass("info_error");
      end_info.addClass("info_error");
      return false;
    }
    //it's valid
    else{
      about.removeClass("error");
      about_info.removeClass("info_error");

      return true;
    }
  }

  function validateOrganisation(){
    //it's NOT valid
    if(organisation.val().length < 1){
      organisation.addClass("error");
      organisation_info.addClass("info_error");
      end_info.addClass("info_error");
      return false;
    }
    //it's valid
    else{
      organisation.removeClass("error");
      organisation_info.removeClass("info_error");
      return true;
    }
  }

  function validateRegion(){
    //it's NOT valid
    if(region.val().length < 1){
      region.addClass("error");
      region_info.addClass("info_error");
      end_info.addClass("info_error");
      return false;
    }
    //it's valid
    else{
      region.removeClass("error");
      region_info.removeClass("info_error");
      return true;
    }
  }

  function validateLiferules(){

    if (rules.attr("value") == "Yes" & liferules.val().length < 1) {
      liferules.addClass("error");
      rules_info.addClass("info_error");
      end_info.addClass("info_error");
      return false;
    }else{
      liferules.removeClass("error");
      rules_info.removeClass("info_error");
      return true;
    }
  });
}

這是選擇收音機yes時我需要使字段必填的功能：

function validateLiferules(){
  if (rules.attr("value") == "Yes" & liferules.val().length < 1) {
    liferules.addClass("error");
    rules_info.addClass("info_error");
    end_info.addClass("info_error");
    return false;
  }else{
    liferules.removeClass("error");
    rules_info.removeClass("info_error");
    return true;
  }
}

但是，一旦我將其放入，就會破壞整個表單驗證。

復選框的HTML

<li><label for="rules"><i>* </i>Potential Breach of Life Saving Rules? (Not Applicable to Airports):</label></li>
                <li>
                    <input type="radio" name="rules" class="rules" value="Yes" ><span>Yes</span>
                    <input type="radio" name="rules" class="rules" value="No"checked><span>No</span>
                </li><br />

                <li class="liferules" style="display: none;"><label for="liferules"><i>* </i>Life Saving Rules (Not Applicable to Airports):<i class="required" id="rules_info">Required</i></label></li>
                <li class="liferules" style="display: none;">
                    <select  name="life_rules" id="liferules">
                        <option value="">Please Select!</option>
                        <option value="Working with electricity">Working with electricity</option>
                        <option value="Working with electricity-test before touch">Working with electricity-test before touch</option>
                        <option value="Always obey the speed limit and wear a seat belt.">Always obey the speed limit and wear a seat belt.</option>
                        <option value="Never use a hand-held or hands-free phone, or programme any other mobile device, while driving.">Never use a hand-held or hands-free phone, or programme any other mobile device, while driving.</option>
                        <option value="Working at height-without a harness">Working at height-without a harness</option>
                        <option value="Equipment fit for intended purpose">Equipment fit for intended purpose</option>
                        <option value="Under the influence of Drugs or Alcohol">Under the influence of Drugs or Alcohol</option>
                        <option value="Wasn't trained for the job at hand">Wasn't trained for the job at hand</option>
                        <option value="Entered exclusion zone(Without permission)">Entered exclusion zone(Without permission)</option>
                        <option value="Plans and Permits Weren't in place before Job">Plans and Permits Weren't in place before Job</option>
                    </select>
                </li><br />

Answer 1

您應該使用表單提交處理程序的第一個參數調用event.preventDefault() 。

form.submit(function(event) {
  if(isCorrect() === false) { // dummy function
    event.preventDefault() // This cancel form submit
  }
});

Answer 2

如果我理解正確，那么您會有一個包含“規則”類的復選框。

那么您的驗證功能應該是：

function validateLiferules(){
        // use rules.is(":checked") to check if the check box is checked
        if (rules.is(":checked") && liferules.val().length < 1) {
            liferules.addClass("error");
            rules_info.addClass("info_error");
            end_info.addClass("info_error");
            return false;
        }else{
            liferules.removeClass("error");
            rules_info.removeClass("info_error");
            return true;
        }
}

另外，您應該使用邏輯&&運算符，而不是按位＆運算符it嗎？