Question

当所有验证都正确时，表单会被提交。但是对于单选按钮和选择按钮，验证没有正确完成，我只想要验证几个字段，但只有在验证所有字段时才会提交表单田野... 这是我的页面......

<form id="contact" name="contact" class="form-horizontal"  method="POST" action="">
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-4 control-label">NAME</label>
          <div class="col-sm-8">
            <input type="text" data-rule-required="true" class="form-control" name="name" id="name" >
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-4 control-label">AGE</label>
          <div class="col-sm-8">
            <input type="text"  class="form-control" name="age" id="age">
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-4 control-label">GENDER</label>
          <div class="col-sm-8">
            <label class="radio-inline">
              <input type="radio"  name="gender" id="inlineRadio1" value="male" class="required">
              Male </label>
            <label class="radio-inline">
              <input type="radio" name="gender" id="inlineRadio2" value="female">
              Female </label>
          </div>
       </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-4 control-label">OCCUPATION</label>
          <div class="col-sm-8">
            <input type="text"   class="form-control" name="occupation" id="occupation">
          </div>
        </div>
      <div class="form-group">
          <label for="inputEmail3" class="col-sm-4 control-label">AREA</label>
          <div class="col-sm-8">
            <select class="form-control required"  name="area">
              <option selected="selected"   value="" >Please Choose</option>
              <option value="A.Naranapura">A.Naranapura</option>
              <option value="Abshot Layout"> Abshot Layout</option>
              <option value="Adugodi"> Adugodi</option>
            </select>
          </div>
        </div>
     <div class="form-group">
          <div class="col-sm-offset-0 col-sm-8">
            <button id="send" class="btn btn-default fran">Submit</button>
          </div>
        </div>

      </form>

这是我的ajax ..

 <script type="text/javascript">
       function validateEmail(email) { 
          var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
          return reg.test(email);
        }
        $(document).ready(function() {


          $("#contact").submit(function() { return false; });


          $("#send").on("click", function(){
            var emailval  = $("#email").val();
            var ageval    = $("#age").val();
            var nameval    = $("#name").val();
            var numval    = $("#contact-number").val();
            var genval    = $("#gender").val();
            var occuval    = $("#occupation").val();

            var areaval    = $("#area").val();

            var mailvalid = validateEmail(emailval);
            var namelen=nameval.length;
            var genlen=genval.length;
            var occculen=occupationval.length;
            var addresslen=addressval.length;
            var numlen=numval.length;

            var arealen=areaval.length;



            if(mailvalid == false) {
              $("#email").addClass("error");
            }
            else if(mailvalid == true){
              $("#email").removeClass("error");
            }
            if(namelen < 1) {
              $("#name").addClass("error");
            }
            else if(namelen >= 1){
              $("#name").removeClass("error");
            }
            if(genlen < 1) {
              $("#gender").addClass("error");
            }
            else if(genlen >= 1){
              $("#gender").removeClass("error");
            }
            if(addresslen < 1) {
              $("#address").addClass("error");
            }
            else if(addresslen >= 1){
              $("#address").removeClass("error");
            }

            if(occulen < 1) {
              $("#occupation").addClass("error");
            }
            else if(occulen >= 1){
              $("#occupation").removeClass("error");
            }
            if(numlen < 1) {
              $("#contact-number").addClass("error");
            }
            else if(numlen >= 1){
              $("#contact-number").removeClass("error");
            }

            if(arealen < 1) {
              $("#area").addClass("error");
            }
            else if(arealen >= 1){
              $("#area").removeClass("error");
            }


   if(mailvalid == true && namelen >=1 && genlen >= 1 && addresslen >= 1 && occulen >= 1 && numlen >= 1 && arealen >= 1 ) {
    // if both validate we attempt to send the e-mail
    // first we hide the submit btn so the user doesnt click twice
    $("#send").replaceWith("<em>sending...</em>");

    $.ajax({
      type: 'POST',
      url: 'sendfranchiseemessage.php',
      data: $("#contact").serialize(),

      success: function(data) {

        if(data == "true") {
         alert();
         $("#contact").fadeOut("fast", function(){
          $(this).before("<p><strong><h1>Success! Your feedback has been sent, thanks :)</h1></strong></p>");
          setTimeout("$.fancybox.close()", 1000);
        });
       }
     }
   });
  }
});
        });
      </script>

Answer 1

如果正确，请尝试检查处理ajax的php的路径。另见，见下文。

  $.ajax({
  type: 'POST',
  url: 'sendfranchiseemessage.php',
  data: $("#contact").serialize(),

  success: function(data) {
    alert( data );
    if(data == "true") {
     alert();
     $("#contact").fadeOut("fast", function(){
      $(this).before("<p><strong><h1>Success! Your feedback has been sent, thanks :)</h1></strong></p>");
      setTimeout("$.fancybox.close()", 1000);
    });
   }
 }

在表单上单击“提交”时，查看是否确实提醒数据。

表格没有通过ajax提交

1 个答案: