表单验证和提交

Question

我正在使用formvalidation.io但是我无法在成功验证时停止提交表单。它会立即提交请求并刷新页面。我需要通过ajax发送表单信息。

我必须忽略一些明显的东西？ http://jsfiddle.net/k281at67/94/

HTML：

<form method="post" id="estimateForm1" class="form-horizontal bv-form">
<input type="hidden" name="page_source" id="page_source" value=""/>

    <fieldset>

     <input type="hidden" name="RefferingPage" value="' . $page . '" />

    <div class="form-group">
        <div class="row">

        <div class="col-md-8 pad_right">
            <input type="text" class="form-control" name="Name" placeholder="*Your name" value="" />
        </div>


    </div><!--row-->
  </div><!--form group-->

    <div class="form-group">
        <div class="row">
            <div class="col-md-8 pad_right">
               <input type="text" class="form-control" name="Phone" placeholder="*Phone" class="phone" value="111-111-1111" />
            </div>

          </div>
    </div>



      <div class="form-group">
        <div class="row">
            <div class="col-md-8 pad_right">
                <input type="text" name="Email"  class="form-control" placeholder="*Email" id="" value="pie@aol.com"/>
            </div>


         </div>


        </div>




   <div class="form-actions">
                    <div class="row">
                        <div class="col-md-2 col-md-offset-5 col-xs-2">
                            <button class="btn btn-default" type="submit" disabled="disabled">
                                <i class="fa fa-eye"></i>
                                Validate
                            </button>
                        </div>
                    </div>
                </div>
  </fieldset>
</form>

Javascript

jQuery('#estimateForm1')
        .formValidation({
            framework: 'bootstrap',
            err: {
                container: 'tooltip'
            },
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                Name: {
                    row: '.col-md-8',
                    validators: {
                        notEmpty: {
                            message: 'The first name is required'
                        },
                        stringLength: {
                            min: 2,

                            message: 'Must be at-least 2 characters long.'
                        },
                        regexp:
                        {
                            message: 'Please only use A-Z characters.',
                            regexp: /^[a-zA-Z]+$/
                        }

                    }
                },
                Phone: {
                    row: '.col-md-8',
                    validators: {

                        notEmpty: {
                            message: 'The phone number is required'
                        },
                        stringLength: {
                            min: 14,
                            max: 15,
                            message: 'Not a valid phone #.'
                        },
                        regexp: {
                            message: 'The phone number can only contain the digits, spaces, -, (, ), + and .',
                            regexp: /^[0-9\s\-()+\.]+$/
                        }
                    }
                },
                Email: {
                    row: '.col-md-8',
                    validators: {
                        notEmpty: {
                            message: 'The email address is required'
                        },
                        regexp: {
                            regexp: '^[^@\\s]+@([^@\\s]+\\.)+[^@\\s]+$',
                            message: 'The value is not a valid email address'

                        }


                    }
                }


            }

        }).find('[name="Phone"]').mask('(000) 000-0000')
        .on('success.field.fv', function(e, data) {
            if (data.fv.getSubmitButton()) {
                e.preventDefault();
                //data.fv.disableSubmitButtons(true);
                 console.log('prevented submission');
            }

        }).on('success.form.bv',function(e)
        {
            e.preventDefault();


           console.log('prevented submission');


        });

Answer 1

1. 您的代码中有拼写错误：

=＆gt;

.on("success.form.bv", function(e) { ...

应为 =＆gt;

.on("success.form.fv", function(e) { ...

1. 您必须在表单实例上触发事件，而不是Phone字段。

我建议你做以下事情：

jQuery('#estimateForm1')
    .find('[name="Phone"]')
        .mask('(000) 000-0000')
        .end()    // <=== DON'T FORGOT TO ADD THIS
    .formValidation({
        // ...
    })
    .on('success.field.fv', function(e, data) {
        // ...
    })
    .on('success.form.fv',function(e) {
        e.preventDefault();
        console.log('prevented submission');
    });

1. 请参阅Using Ajax to submit the form示例。

Answer 2

此功能可以停止呼叫提交事件。它应该是调用手册

$(document).ready(function() {

 $("#formname").submit(function(e) {

     e.preventDefault();
 });
});

第二个选项应该适用于向客户端验证表单。如果验证所有值都返回true，则激活提交事件，否则不要激活。

 function validation() {

     return false;
 });

但是像这样在提交按钮上调用函数

onclick="return validation()

Answer 3

试试这个

.on('success.form.bv',function(e)
        {
            e.preventDefault();

           return false;
           console.log('prevented submission');


        });