ブートストラップバリデーターは、フォームを2回目のクリックで起動するようにします。

Question

送信ボタンをクリックしてフォームを送信しようとしていますが、これはデフォルトアクションでは禁止されています。

これは私のコードです：

$('#payment-form').bootstrapValidator({ 
     live: 'disabled', 
     feedbackIcons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      cardNumber: { 
       validators: { 
        notEmpty: { 
         message: $('#cardNumber').attr('data-error-required') 
        } 
       } 
      } 

     } 
    }); 

    $('#paymentSubmit').on('click', function (e) { 
     e.preventDefault(); 

     var $form = $('#payment-form'); 

     if(basket.length >= 1 || basketTotalPrice > 0){  
      $form.bootstrapValidator('validate'); 
      if ($form.bootstrapValidator('isValid')) { 
       $form.submit(); 
      } 
     } 
     else { 
      console.log('basket empty'); 
     } 
    }) 

フォームが最初のクリックで検証されており、提出していない、し、2回目のクリックで火災を提出します！

Answer 1

私は、これはあなたの問題だと思う：

if(basket.length >= 1 || basketTotalPrice > 0){  
     $form.bootstrapValidator('validate'); 
     if ($form.bootstrapValidator('isValid')) { 
      $form.submit(); 
     } 
    } 

何が起こっているようだが、このライン

$form.bootstrapValidator('validate'); 

はその仕事をして検証を実行しているが、検証が前に完了していないということです次の行にジャンプします。

if ($form.bootstrapValidator('isValid')) { 

これが問題の開始場所です。有効な条件の設定がまだ完了していないため、2番目の条件が満たされません。次に、失敗した後、チェックの検証が完了し、条件を有効に設定します。もう一度クリックすると、検証がすでに行われているので、フォームが送信されます。

修正するには、検証が最初に完了するまで2番目の条件を保持する必要があります。バリデーターからのコールバックはこれには完璧です。