繁体   English   中英

使用bootstrapvalidator成功验证后发送帖子请求

[英]Send post request on successful validation using bootstrapvalidator

我正在使用bootstrap Validator( bootstrapvalidator.com )来验证我的表单,但是当字段成功验证后,我想使用后请求将内容发送到php文件中。如何实现此目的?

以下是我的表格和验证代码,验证工作没有任何问题。

HTML

<form id="form" method="post" action="contact-form.php">
    <div class="container">
      <div class="form-container">
        <div class="row">
          <div class="col-sm-6">
            <div class="row">
              <div class="col-sm-8">
                <div class="form-group">
                  <label>Name: <span class="required">*</span></label>
                  <input type="text" class="form-control" name="name" id="name" placeholder="Enter your name">
                </div>
.
.
.
.
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <p id="returnmessage"></p>
              <button type="reset" class="btn btn-info pull-right">Reset</button>
              <button type="submit" id="send" class="btn btn-info pull-right">Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JS:

    var isValid = $('#form').bootstrapValidator({
  message: 'This value is not valid',
    feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
    },
  fields: {
    name: {
            message: 'The name is not valid',
            validators: {
                notEmpty: {
                    message: 'The name is required and cannot be empty'
            },
            stringLength: {
                    min: 6,
                    max: 30,
                    message: 'The name must be more than 6 and less than 30 characters long'
                },
                regexp: {
                    regexp: /^[a-zA-Z]+$/,
                    message: 'The username can only consist of alphabets'
                }
            }
        },
/*      country: {
                message: 'The country is not valid',
                validators: {
                    notEmpty: {
                            message: 'The country is required'
                    }
                }
        },
*/      state: {
                message: 'The state is not valid',
                validators: {
                    notEmpty: {
                            message: 'The country and state is required'
                    }
                }
        },
        city: {
                message: 'The city is not valid',
                validators: {
                    notEmpty: {
                            message: 'The city is required'
                    }
                }
        },
/*      ccode: {
                message: 'The country code is not valid',
                validators: {
                    notEmpty: {
                            message: 'The country code is required'
                    }
                }
        },
        ccode1: {
                message: 'The country code is not valid',
                validators: {
                    notEmpty: {
                            message: 'The country code is required'
                    }
                }
        },
*/      phone: {
      validators: {
        digits: {
          message: 'The phone number can contain digits only'
        },
        notEmpty: {
                    message: 'The phone number is required'
        }
      }
    },
    email: {
            validators: {
                notEmpty: {
                    message: 'The email is required and cannot be empty'
                },
                emailAddress: {
                    message: 'The input is not a valid email address'
                }
            }
        },
        msg: {
                message: 'The message is not valid',
                validators: {
                    notEmpty: {
                            message: 'The message is required'
                    }
                }
        },
        captchabox: {
                message: 'The CAPTCHA is not valid',
                validators: {
                    notEmpty: {
                            message: 'The CAPTCHA is required'
                    },
                    identical: {
                        field: 'captchatext',
                        message: 'The CAPTCHA does not match'
                    }
                }
        }
    }
}).isValid();


if(isValid){
    var name = $("#name").val();
    var designation = $("#designation").val();
    var company = $("#company").val();
    var country = $("#country").val();
    var state = $("#state").val();
    var city = $("#city").val();
    var zip = $("#zip").val();
    var ccode = $("#ccode").val();
    var phone = $("#phone").val();
    var fax = $("#fax").val();
    var email = $("#email").val();
    var website = $("#website").val();
    var hear = $("#hear").val();
    var message = $("#message").val();
    var captcha = $("#captchatext").val();
    var capbox = $("#captchabox").val();
    alert("Name:"+name);
    $.post("contact_form.php", {
        name1: name,
        designation1: designation,
        company1: company,
        country1: country,
        state1: state,
        city1: city,
        zip1: zip,
        ccode1: ccode,
        phone1: phone,
        fax1: fax,
        email1: email,
        website1: website,
        hear1: hear,
        message1: message,
        }, 
        function(data) {
        $("#returnmessage").append(data); // Append returned message to message paragraph.
            if (data == "Your Query has been received, We will contact you soon.") {
            $("#form")[0].reset(); // To reset form fields on success.
        }
    });
}

如果我说对了,我想您只需要添加如下验证检查:

看这里

// create var and store result in it
var isValid = $('#form').bootstrapValidator({
      message: 'This value is not valid',
      feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
}, .....).is_valid();
// add the is_valid() to the end

// check with the validation var
if(isValid){
    //do some here...
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM