2015-07-09 2 views
1

Привет У меня есть кнопка в всплывающем окне, которое отправляет информацию о платежном шлюзе. Все, что я хочу, это когда у вас не проверен способ оплаты (радиокнопка) или принять условия (флажок), я должен бросить ошибку, если кто-то выбран, а затем выбросить ошибку, чтобы проверить другую, и если оба они отмечены, то откройте новый мини-браузер. где я использовал AJAX для отправки этих значений.Как остановить форму отправить и выбросить ошибку jquery

$(document).ready(function() { 


    $(document).on("mouseover", ".imgpayment", function() { 
     $(this).parent().addClass("paymenthover"); 
    }); 

    $(document).on("mouseout", ".imgpayment", function() { 
     $(this).parent().removeClass("paymenthover"); 
    }); 

    $(document).on("click", ".the-terms", function() { 
     if ($(this).is(":checked")) { 
      $("table#paymenttable td").each(function() { 
       if ($(this).hasClass("paymentclick")) { 
        $(this).removeClass("paymentclick"); 
       } 
      }); 
      if ($("#policyAgree").prop('checked') == true) { 
       $("#submitBtn").removeAttr("disabled"); 
      } else { 
       $("#paymentError").html('<span class="disablebtnInfo" id="msg" style="display:block;margin-left: 40%;"><span class="error_sign">!</span>&nbsp;<span id="errmsg">Agree terms and condition.</span></span></strong>'); 

      } 
      $(this).parent().addClass("paymentclick"); 
     } else { 
      $("#paymentError").html('<span class="disablebtnInfo" id="msg" style="display:block;margin-left: 40%;"><span class="error_sign">!</span>&nbsp;<span id="errmsg">Agree terms and condition.</span></span></strong>'); 
      $("#submitBtn").attr("disabled", "disabled"); 
     } 
    }); 


    $(document).on("click", ".imgpayment", function() { 
     $("table#paymenttable td").each(function() { 
      if ($(this).hasClass("paymentclick")) { 
       $(this).removeClass("paymentclick"); 
      } 
     }); 
     if ($("#policyAgree").prop('checked') == true) { 

     } else { 
      $("#paymentError").html('<span class="disablebtnInfo" id="msg" style="display:block;margin-left: 40%;"><span class="error_sign">!</span>&nbsp;<span id="errmsg">Agree terms and condition.</span></span></strong>'); 

     } 
     $(this).parent().toggleClass("paymentclick"); 
     $(this).parent().find(".the-terms").prop('checked', true); 
     checkterms(); 
    }); 


}); 


$(document).on("click", "#policyAgree", function() { 
    if ($(this).prop('checked') == true) { 
     checkterms(); 
    } else { 
     $("#submitBtn").attr("disabled", 'disabled'); 
    } 

}); 

function checkterms() { 
    if ($(".the-terms").is(":checked") && $("#policyAgree").is(":checked")) { 
     $("#submitBtn").removeAttr("disabled"); 
    } else { 
     $("#submitBtn").attr("disabled"); 
    } 
} 

и HTML:

<tr id="paymentmethod"> 
    <td> 
     <input type="radio" name="payment" value="paypal" class="the-terms" required> 
     <img src='<?php echo base_url() . ' contents/images/paypal.png '; ?>' class="imgpayment" style="height: 40px;"> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input type="radio" name="payment" value="esewa" class="the-terms" required> 
     <img src='<?php echo base_url() . ' contents/images/esewa.png '; ?>' class="imgpayment" style="height: 40px;"> 
    </td> 
</tr> 
<?php } ?> 
<tr> 
    <td style="height: 50px;"> 
     <input type="radio" name="payment" value="counterPay" class="the-terms" required> 
     <span class="imgpayment" style="font-weight: bold"> Cash On Arrival </span> 
    </td> 
</tr> 
<div id="action"> 
    <input id="type" type="hidden" name="mini" value="mini" /> 
    <input id="paykey" type="hidden" name="paykey" value="10" /> 
    <input type="button" id="popupBtn" value="Back" onclick="backbutton()" class="backBtnPayment" /> 
    <span id="paymentError" style="color:#0d0daf;font-size: 12px;float: left;"><?php if(!empty($msgs)){ echo $msgs; } ?></span> 
    <input type="submit" id="submitBtn" value="Next" class="payment" disabled style="float: right;"> 
</div> 
+1

вы не можете уменьшить свой код для конкретной задачи ? –

ответ

2

Когда нажмите submitBtn, вы можете остановить его с помощью функции preventDefault, такие как:

$("#submitBtn").click(function(event){ 
     event.preventDefault(); 
     /// check validate conditions 
     if(validate) 
     $("#formID").submit(); 
     else 
     throw errors; 
}); 
+0

Я пробовал с preventDefault, но это не сработало для меня –

2

вы можете поставить onsubmit вызов функции на form и возвращать ложь для проверки не удалось.

HTML:

<form onsubmit="validate()"....> 

JavaScript:

function validate() 
{ 
    //your logic to validate data 
    if(valid data) 
    return true; 
    else 
    return false; 
} 
0

Попробуйте использовать Jquery проверки и внутри submitHandler вы можете вызвать ajax-запрос

Jquery validation example

0

Вы можете использовать submit событие формы для проверки формы, как этот

$("#form1").submit(function(event){ 
    if(FormNotvalid){ 
     alert("Error"); 
     event.preventDefault(); 
    } 
}); 

проверки этот простой пример для справки

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      $("#form1").submit(function(event){ 
       if($("#email").val() == ""){ 
        alert("Error"); 
        event.preventDefault(); 
       } 
      }); 
     }) 
    </script> 
    </head> 
    <body> 
     <form id="form1" action="#"> 
      <pre> 
       <input type="text" id="email" name="email"/> 
       <input type="submit"/> 
      </pre> 
     </form> 
    </body> 
</html> 
Смежные вопросы