jQuery Validation plugin: prompt for override
- by Sam Carleton
I have a jQuery form that has validation of a sort. It is a data entry screen with two 'recommend ranges', one is 36-84, the other 50-300. The business rules call for the values to be either blank or greater than zero, but to prompt for confirmation if the values are outside of the range listed above.
I have seen some other threads that talk about setting the class="cancel" on the submit button. From what I can tell, this will simply disable the validation. I need to prompt for a "do you want to continue, yes or no?" and if no stop the submit, if yes, continue.
Below is an example from the book Pro jQuery. By default the top row needs to be between 10 and 20 to submit. How would you change it so that it prompts you and if you say Yes it submits, no prevents the submit:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-1.7.js" type="text/javascript"></script>
<script src="jquery.tmpl.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<style type="text/css">
h1 {
min-width: 70px; border: thick double black; margin-left: auto;
margin-right: auto; text-align: center; font-size: x-large; padding: .5em;
color: darkgreen; background-image: url("border.png");
background-size: contain; margin-top: 0;
}
.dtable {display: table;}
.drow {display: table-row;}
.dcell {display: table-cell; padding: 10px;}
.dcell > * {vertical-align: middle}
input {width: 2em; text-align: right; border: thin solid black; padding: 2px;}
label {width: 5em; padding-left: .5em; display: inline-block;}
#buttonDiv {text-align: center;}
#oblock {display: block; margin-left: auto; margin-right: auto; min-width: 700px; }
div.errorMsg {color: red}
.invalidElem {border: medium solid red}
</style>
<script type="text/javascript">
$(document).ready(function() {
var data = [
{ name: "Astor", product: "astor", stocklevel: "10", price: "2.99"},
{ name: "Daffodil", product: "daffodil", stocklevel: "12", price: "1.99"},
{ name: "Rose", product: "rose", stocklevel: "2", price: "4.99"},
{ name: "Peony", product: "peony", stocklevel: "0", price: "1.50"},
{ name: "Primula", product: "primula", stocklevel: "1", price: "3.12"},
{ name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: "0.99"},
];
var templResult = $('#flowerTmpl').tmpl(data);
templResult.slice(0, 3).appendTo('#row1');
templResult.slice(3).appendTo("#row2");
$('form').validate({
highlight: function(element, errorClass) {
$(element).add($(element).parent()).addClass("invalidElem");
},
unhighlight: function(element, errorClass) {
$(element).add($(element).parent()).removeClass("invalidElem");
},
errorElement: "div",
errorClass: "errorMsg"
});
$.validator.addClassRules({
flowerValidation: {
required: true,
min: 0,
max: 100,
digits: true,
}
})
$('#row1 input').each(function(index, elem) {
$(elem).rules("add", {
min: 10,
max: 20
})
});
$('input').addClass("flowerValidation").change(function(e) {
$('form').validate().element($(e.target));
});
});
</script>
<script id="flowerTmpl" type="text/x-jquery-tmpl">
<div class="dcell">
<img src="${product}.png"/>
<label for="${product}">${name}: </label>
<input name="${product}" value="0" required />
</div>
</script>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<form method="post" action="http://node.jacquisflowershop.com/order">
<div id="oblock">
<div class="dtable">
<div id="row1" class="drow">
</div>
<div id="row2"class="drow">
</div>
</div>
</div>
<div id="buttonDiv"><button type="submit">Place Order</button></div>
</form>
</body>
</html>
