Question

我正在使用bootstrap验证器（bootstrapvalidator.com）来验证我的表单，但是当字段验证成功时我想使用post request将内容发送到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.
        }
    });
}

Answer 1

如果我说得对，我想你只需添加一个验证检查：

see here

// 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...
}

使用bootstrapvalidator在成功验证时发送发布请求

1 个答案: