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。

Answer 2

使用表单时，最好将验证处理程序附加到表单的提交事件中，而不是单击提交按钮。因为表单可以提交其他方式，例如按输入输入。

更改

$('.formelement-submit').click(

要

$('#contact_form').on('submit',

它在this fiddler

工作

已发送表单但验证有错误

2 个答案: