Bootstrap表格Validator:发送联系电子邮件

时间:2018-05-05 14:24:14

标签: php jquery ajax twitter-bootstrap

我正在使用bootstrap验证器并尝试发送电子邮件与我们联系,如下所示

HTML

  <form  id="homeform"   >
    <div class='form-group'>
      <input type='text' class='form-control'  name='name' required placeholder='Full Name'/>
    </div>
    <div class='form-group'>
      <input type='text'  name='companyname' class='form-control' required  placeholder='Company Name'/>
    </div>
    <div class='form-group'>
      <input type='text' class='form-control' name='email'  required placeholder='Email'/>
    </div>

    <div class='form-group'>
      <input type='text' class='form-control' required  name='contactnumber' placeholder='Contact Number'/>
    </div>
    <div class='form-group'>
        <textarea  name='message' class='form-control' required rows='10' placeholder='Details such as Project vision, Target market  and more'></textarea>
    </div>
    <div class='form-group'>
      <input type='submit' id='submit' class='btn btn-default pull-right' 
  value='Submit'>
   </div>

   <div class='form-group '>
     <div class='msg hiding'>
        <div class='alert alert-success alert-dismissible'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><strong>Thanks, we have received your message
         </div>
       </div>       
    </div>
   </form>

JS

$(document).ready(function() {
    $('#homeform').bootstrapValidator({
        // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: {
                validators: {
                        stringLength: {
                        min: 2,
                    },
                        notEmpty: {
                        message: 'Please enter your full name'
                    }
                }
            },

            email: {
                validators: {
                    notEmpty: {
                        message: 'Please enter your email address'
                    },
                    emailAddress: {
                        message: 'Please enter a valid email address'
                    }
                }
            },
            phone: {
                validators: {
                    notEmpty: {
                        message: 'Please enter your phone number'
                    },
                    phone: {
                        country: 'UAE',
                        message: 'Please supply a vaild phone number with area code'
                    }
                }
            },


            companyname: {
                validators: {
                    notEmpty: {
                        message: 'Please select your your company name'
                    }
                }
            },

            message: {
                validators: {
                    notEmpty: {
                        message: 'Please enter your message'
                    }
                }
            },


            }
        })
        .on('success.form.bv', function(e) {
            $('.msg').slideDown({ opacity: "show" }, "slow") // Do something ...
                $('#contact_form').data('bootstrapValidator').resetForm();

            // Prevent form submission
            e.preventDefault(); 
            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {
                console.log(result);
            }, 'json');
        });
});

如何在$ .post块中发送电子邮件.Plase帮助

0 个答案:

没有答案