0

フィールドの検証にbootstrapValidator()を使用するフォームを送信しようとすると問題が発生します->送信されず、phpファイルが実行されません(booststrapValidatorなしで試してみたので動作します)。何か案が？

フォームは次のようになります。

<form id="contactForm"  class="form-horizontal" role="form" action="contact_form.php" method="post">
      <div class="form-group">
        <label class="control-label col-sm-2" for="name">Name</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="name" name="name" placeholder="Name">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email</label>
        <div class="col-sm-10"> 
          <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com">
        </div>
      </div>
      <div class="form-group"> 
        <label class="control-label col-sm-2" for="msg">Mesage</label>
        <div class="col-sm-10"> 
            <textarea class="form-control col-sm-10" id="msg" name="msg" placeholder=""></textarea>
        </div>
      </div>
      <div class="form-group">
        <label id="captchaOperation" class="control-label col-sm-2" for="captcha"></label>
        <div class="col-sm-10"> 
          <input type="text" class="form-control" id="captcha" name="captcha" placeholder="Answer">
        </div>
      </div>
      <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10">
          <input type="submit" class="btn btn-primary" id="submit" name="submit" value="Send"></button>
        </div>
      </div>
</form>
4

2 に答える 2

0

id="submit" name="submit"から削除</button>する

<input type="submit" class="btn btn-primary" id="submit" name="submit" value="Send"></button>

追加data-toggle="validator"する<form>

<form id="contactForm" class="form-horizontal" role="form" action="contact_form.php" method="POST" data-toggle="validator">

したがって、完全な形式は

<form id="contactForm" class="form-horizontal" role="form" action="contact_form.php" method="POST" data-toggle="validator">
    <div class="form-group">
        <label class="control-label col-sm-2" for="name">Name</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="name" name="name" placeholder="Name">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="msg">Mesage</label>
        <div class="col-sm-10">
            <textarea class="form-control col-sm-10" id="msg" name="msg" placeholder=""></textarea>
        </div>
    </div>
    <div class="form-group">
        <label id="captchaOperation" class="control-label col-sm-2" for="captcha"></label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="captcha" name="captcha" placeholder="Answer">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <input type="submit" class="btn btn-primary" value="Send">
            </button>
        </div>
    </div>
</form>

およびブートストラップ バリデータのコード例

$(document).ready(function(){
    $('#contactForm').bootstrapValidator({
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        excluded: [':disabled'],
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: 'The Full Name field is required'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The Email field is required'
                    }
                }
            },
            msg: {
                validators: {
                    notEmpty: {
                        message: 'The Message field is required'
                    }
                }
            },
            captcha: {
                validators: {
                    notEmpty: {
                        message: 'The Captcha field is required'
                    }
                }
            }
        }
    });
});

検証後にフォームを送信します。検証後にフォームが送信されない実際の理由は、タイプも（名前とID =送信のフィドルid="submit" name="submit"）ボタン内にあります。理由は不明です。入力を処理するには、削除するか(名前なしで Fiddle & id = submit )、別のものに変更します(名前& id = sub で Fiddle ) 。submittype="submit"type="submit" id="submit" name="submit"id="submit" name="submit"type="submit"id="sub" name="sub"

于 2015-09-30T19:56:22.537 に答える
0

id と name "submit" は問題の 1 つでしたが、別の問題は次のとおりです。

$("#contactForm").submit(function(ev){
ev.preventDefault();
});
$("#sbm").on("click", function(){
 var bootstrapValidator = $("#contactForm").data('bootstrapValidator');
 bootstrapValidator.validate();

if(bootstrapValidator.isValid())
    //setTimeout(function(){$("#success").show();}, 300);
    error = true;
    $("#contactForm").submit();
else return;
});

バリデーターの戻り状態をキャプチャしようとしていたため、フォームの送信が妨げられました。PS: preventDefault() も使用せずに試してみましたが、まったく成功しなかったため、このコードをすべて削除したところ、問題なく動作するようになりました。

于 2015-10-01T08:48:38.070 に答える