asked on

bValidator to run validation from 2 buttons not in a form?

Hi,
Does anyone know how to setup bValidator to check data entered when fields are not within a form?

http://bojanmauser.from.hr/bvalidator/

I need to run the validation when either of 2 order buttons are clicked.

Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Validator</title>
<script type="text/javascript" src="jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.bvalidator.js"></script>
<link href="bvalidator.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div class="store_option">
<input name="store_option_chosen" type="radio"  id="store_option_chosen_store_1" value="store_1">
<label for="store_option_chosen_store_1">Store 1</label>
<input name="store_option_chosen" type="radio"  id="store_option_chosen_store_2" value="store_2">
<label for="store_option_chosen_store_2">Store 2</label>
<input name="store_option_chosen" type="radio"  id="store_option_chosen_store_3" value="store_3"  data-bvalidator="required" data-bvalidator-msg="Please choose a Store">
<label for="store_option_chosen_store_3">Store 3</label>
</div>

<div class="postage_option">
<input name="delivery_option_chosen" type="radio"  id="delivery_option_chosen_pikcup" value="pickup">
<label for="delivery_option_chosen_pikcup">Pickup Order</label>
<input name="delivery_option_chosen" type="radio"  id="delivery_option_chosen_deliver" value="deliver">
<label for="delivery_option_chosen_deliver">Deliver Order</label>
<input name="delivery_option_chosen" type="radio"  id="delivery_option_chosen_quote" value="quote" data-bvalidator="required" data-bvalidator-msg="Please choose a postage option">
>
<label for="delivery_option_chosen_quote">Quote Shipping</label>
</div>

<div class="date_required">
Date Required 
<input type="text" data-bvalidator="date[dd/mm/yyyy],required">
</div>


<div class="buttons">
<input name="place_order_btn" type="button" 
onClick="location.href='index.php?page=cart_details'" 
class="button green" id="place_order_btn" value="Place Order" />

<input name="place_order_btn" type="button" 
onClick="location.href='index.php?page=paypal_express'" 
class="button green" id="place_order_btn2" value="PayPal Express Checkout" />
</div>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

HugoHiasl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sabecs

ASKER

Thanks for your help, much appreciated.

So would you recommend I surround all input and buttons within a div id=shopping_cart for example and then code something like below?

<script type="text/javascript">            
    
    $(document).ready(function () {
        $('#shopping_cart).bValidator();
    });
    
    function checkIfValid(){
        if($('# shopping_cart).data('bValidator').validate())
            window.location = "'index.php?page=cart_details'";
    }

    function checkIfValid2(){
        if($('# shopping_cart).data('bValidator').validate())
            window.location = "'index.php?page=paypal_express'";
    }
    
</script> 

<div class="buttons">
<input name="place_order_btn" type="button"  onclick="checkIfValid();" class="button green" id="place_order_btn" value="Place Order" />
<input name="place_order_btn" type="button" onclick="checkIfValid2();" class="button green" id="place_order_btn2" value="PayPal Express Checkout" />
</div>