javascript - 表单已发送但验证有错误

Question

我的表单运行不正常。虽然有错误，但还是可以通过的。 Errflag 为 1，但变为“0”。感谢有人可以阐明一些问题。

JSFiddle:https://jsfiddle.net/rezasan/xxqtuc7d/

HTML

<form id="contact_form">
      <div class="medium-6 columns">
        <input type="hidden" name="sourcepage" value="Index Page">
        <input type="text" placeholder="NAME" name="name" id="name" required />
        <input type="email" placeholder="EMAIL" name="email" id="email" required/>
        <input type="text" placeholder="TEL" name="phone" id="phone" required/>
        <select name="services" id="serviceslist">
          <option value="services" selected>SERVICES</option>
          <option value="botox">Botox</option>
          <option value="filler">Filler</option>
          <option value="Ultherapy">Ultherapy</option>
          <option value="coolsculpting">CoolSculpting</option>
          <option value="threadlift">Thread Lift</option>
          <option value="others">Others</option>
        </select>
        <div class="errtext"></div>
      </div>
      <div class="medium-6 columns">
        <textarea rows="6" cols="55" name="message" id="message" placeholder="Please enter your enquiries"></textarea>
        <input type="submit" style="float:right;" id="submit" name="submit" class="formelement-submit">
      </div>
    </form>

JavaScript

    function trimStr (str) {
      return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    }

    function checkTFieldValue(target,value,errorclass) {
      if(trimStr($(target).val()) == value) {
        $(target).addClass(errorclass);
        return 1;
      } else{
        return 0;
      }
    }

    function checkSFieldValue(target,value,errorclass) {
      if(value == "SERVICES") {
        $(target).addClass(errorclass);
        return 1;
      } else{
        return 0;
      }
    }

    function checkEmailValue(target,value,errorclass) {
      var err = 0;
      var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
      if(trimStr($(target).val()) == value) {
        $(target).addClass(errorclass);
        err = 1;
      } else if(!emailReg.test($(target).val())) {
        $(target).addClass(errorclass);
        err = 1;
      }
      return err;
    }

    $('#contact_form').append('<input type="hidden" name="jsauth" value="dryga-f"/>');
    $('.formelement-submit').click(function(e){
      e.preventDefault();
      e.stopPropagation();
      var errflag = 0;
      var counter = 0;
      $('.formerror').removeClass('formerror');
      $('.errtext').empty();
      var e = document.getElementById("serviceslist");
      var strUser = e.options[e.selectedIndex].text;

      errflag = checkTFieldValue('#name','','formerror');
      errflag = checkEmailValue('#email','','formerror');
      errflag = checkTFieldValue('#phone','','formerror');
      errflag = checkSFieldValue('#serviceslist',strUser,'formerror');
      errflag = checkTFieldValue('#message','','formerror');

      if(errflag == 1){
        $('.errtext').html('<p>*Please fill in all the required fields</p>');
      }
      if(errflag == 0){
        $('.errtext').html('No error');
      }
    });

Answer 1

如果 #message 有效，则它会用 0 覆盖所有其他内容。

您需要+= errflag 并检查>:-

  errflag += checkTFieldValue('#name','','formerror');
  errflag += checkEmailValue('#email','','formerror');
  errflag += checkTFieldValue('#phone','','formerror');
  errflag += checkSFieldValue('#serviceslist',strUser,'formerror');
  errflag += checkTFieldValue('#message','','formerror');

  if(errflag > 0){
    $('.errtext').html('<p>*Please fill in all the required fields</p>');
  }
  else {
    $('.errtext').html('No error');
  }

另外，正如 @MarcoScabbiolo 所建议的，使用submit 而不是 click。