formValidation.IO withbootstrap防止提交表单



我检查了所有帖子/答案,但无法找到答案。验证工作完美,但它阻止提交表单。但是,如果我删除验证,然后表单的值去电子邮件。我发现的共同点是按钮名称/id不应该是"提交"。表单名称不应重复。但是这个表单还是不行

代码

<!---Included files --->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="dist/js/formValidation.min.js"></script>
<script src="dist/js/frame/work/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    };
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));    
    $('#defaultForm').formValidation({
        message: 'This value is not valid',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: 'The name is required'
                    }
                }
            },
            subject: {
                validators: {
                    notEmpty: {
                        message: 'The subject is required'
                    }
                }
            },
            message: {
                message: 'The message is not valid',
                validators: {
                    notEmpty: {
                        message: 'The message is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The message must be more than 6 and less than 30 characters long'
                    },
                 }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },
            captcha: {
                validators: {
                    callback: {
                        message: 'Wrong answer',
                        callback: function(value, validator, $field) {
                            var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                            return value == sum;
                        }
                    }
                }
            }   
        }
    }).on('success.form.fv', function(e) {
        // Prevent submit form
        e.preventDefault();
        var $form     = $(e.target),
            validator = $form.data('formValidation');
        $form.find('.alert').html('Thanks' + validator.getFieldElements('name').val()).show();
    });
});
</script>
<!--- --------------------------Form Start------------->
<form class="form-horizontal" method="post" action="<?php echo $PHP_SELF;?>" id="defaultForm">
    <fieldset>
        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="name">Name*</label>  
          <div class="col-md-4">
          <input id="name" name="name" type="text" placeholder="Name" class="form-control input-md" required="">
          </div>
        </div>
        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="email">Email*</label>  
          <div class="col-md-4">
          <input id="email" name="email" type="text" placeholder="xyz@abc.com" class="form-control input-md" required="">
          </div>
        </div>
        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="subject">Subject*</label>  
          <div class="col-md-4">
          <input id="subject" name="subject" type="text" placeholder="" class="form-control input-md" required="">
          </div>
        </div>
        <!-- Multiple Radios -->
        <div class="form-group">
          <label class="col-md-4 control-label" for="receiver">Please select the person you would like to receive this email:</label>
          <div class="col-md-4">
          <div class="radio">
            <label for="receiver-0">
              <input type="radio" name="receiver" id="receiver-0" value="Dr. Bill Stackhouse" checked="checked">
              Dr. Bill Stackhouse
            </label>
            </div>
          <div class="radio">
            <label for="receiver-1">
              <input type="radio" name="receiver" id="receiver-1" value="Dr. Larry Laughlin">
              Dr. Larry Laughlin
            </label>
            </div>
          <div class="radio">
            <label for="receiver-2">
              <input type="radio" name="receiver" id="receiver-2" value="Dr. Ryan Laughlin">
              Dr. Ryan Laughlin
            </label>
            </div>
          <div class="radio">
            <label for="receiver-3">
              <input type="radio" name="receiver" id="receiver-3" value="Frank Chen">
              Frank Chen
            </label>
            </div>
          <div class="radio">
            <label for="receiver-4">
              <input type="radio" name="receiver" id="receiver-4" value="Suzanne Fancy">
              Suzanne Fancy
            </label>
            </div>
          <div class="radio">
            <label for="receiver-5">
              <input type="radio" name="receiver" id="receiver-5" value="Sandy Fernandes">
              Sandy Fernandes
            </label>
            </div>
          <div class="radio">
            <label for="receiver-6">
              <input type="radio" name="receiver" id="receiver-6" value="Helena Greyvenstein">
              Helena Greyvenstein
            </label>
            </div>
          <div class="radio">
            <label for="receiver-7">
              <input type="radio" name="receiver" id="receiver-7" value="Traci Howard">
              Traci Howard
            </label>
            </div>
          <div class="radio">
            <label for="receiver-8">
              <input type="radio" name="receiver" id="receiver-8" value="Leslie Martin">
              Leslie Martin
            </label>
            </div>
          <div class="radio">
            <label for="receiver-9">
              <input type="radio" name="receiver" id="receiver-9" value="Leydia Nayfeh">
              Leydia Nayfeh
            </label>
            </div>
          </div>
        </div>
        <!-- Multiple Checkboxes -->
        <div class="form-group">
          <label class="col-md-4 control-label" for="copytoyourself">Send a copy of this message to yourself:</label>
          <div class="col-md-4">
          <div class="checkbox">
            <label for="copytoyourself-0">
              <input type="checkbox" name="copytoyourself" id="copytoyourself-0" value="Yes">
              Yes
            </label>
            </div>
          </div>
        </div>
        <!-- Textarea -->
        <div class="form-group">
          <label class="col-md-4 control-label" for="message">Message</label>
          <div class="col-md-4">                     
            <textarea class="form-control" id="message" name="message"></textarea>
          </div>
        </div>
        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="phone">Contact Number:</label>  
          <div class="col-md-4">
          <input id="phone" name="phone" type="number" placeholder="" class="form-control input-md" required="">
          </div>
        </div>
        <!-- Multiple Checkboxes -->
        <div class="form-group">
          <label class="col-md-4 control-label" for="time">When is the best time to contact you:</label>
          <div class="col-md-4">
          <div class="checkbox">
            <label for="time-0">
              <input type="checkbox" name="time" id="time-0" value="Morning (before 9am)">
              Morning (before 9am)
            </label>
            </div>
          <div class="checkbox">
            <label for="time-1">
              <input type="checkbox" name="time" id="time-1" value="Day (9am to 5pm)">
              Day (9am to 5pm)
            </label>
            </div>
          <div class="checkbox">
            <label for="time-2">
              <input type="checkbox" name="time" id="time-2" value="Evening (after 5pm)">
              Evening (after 5pm)
            </label>
            </div>
          </div>
        </div>
        <div class="form-group">
         <label class="col-md-4 control-label" id="captchaOperation"></label>
          <div class="col-md-4">
            <input type="text" class="form-control" name="captcha" />
           </div>
         </div>
        <!-- Button -->
        <div class="form-group">
          <label class="col-md-4 control-label" for="submit"></label>
          <div class="col-md-4">
            <button id="submitButton" name="submitButton" class="btn btn-default">Message us</button>
          </div>
        </div>
        <div class="alert alert-success" style="display: none; text-align:center;"></div>
    </fieldset>
</form>
<!---------------php start ---------------------->
<?php
    include_once("Mail.php");
    if (isset($_POST["submitButton"])) {
        $email ='';
        $subject ='';
        $message ='';
        $phone ='';
        $from =''; 
        $to ='';
        $receiver ='';
        $time ='';
        $errName ='';
        $errEmail='';
        $errMessage='';
        $copytoyourself ='';
        echo $name = $_POST['name'];
        $email = $_POST['email'];
        $subject = $_POST['subject'];
        $message = $_POST['message'];
        $phone = $_POST['phone'];
        $from = ''.$email; 
        $to = 'info@innovationskies.com'; 
        $receiver = $_POST['receiver'];         
        $message1 = "Doctor Name: $receivern Time to Contact: $time ";
        echo    $body = "From: $namen E-Mail: $emailn Phone: $phonen Message:n $messagen $message1";

        // If there are no errors, send the email
        if (!$errName && !$errEmail && !$errMessage) {
            if (mail ($to, $subject, $body,  "From: <$email>")) {
                 $result='<div class="alert alert-success">Thank You! I will be in touch</div>';
                 // If there if copytoyourself is yes 
                if (isset($_POST["copytoyourself"])) {  
                mail ($email, "Copy: <$subject>", $body,  "From: <$email>");
                }
            }
            else {
                $result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later</div>';
            }
        }
    }
?>

您需要在<div class="md-form">中包装所有表单字段-文档没有直接告诉它,但它在示例中显示

相关内容

  • 没有找到相关文章

最新更新