表单已发送,但验证有错误

Form sent but validation has error

本文关键字:验证 有错误 表单      更新时间:2023-09-26

我的表单工作不正常。尽管有错误,它仍然能够通过。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');
      }
    });

如果#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');
  }

此外,正如@MarcoScapbbiolo建议的那样,使用submit而不是click

使用表单时,最好将验证处理程序附加到表单的提交事件中,而不是单击提交按钮。因为表单还有其他提交方式,比如在输入时按enter键。

更改

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

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

它在这个小提琴中工作