I have a form that validates just fine with the jquery validation plugin, but the form I produce with handlebars will not validate. After hitting submit, it just goes to the action page.
<div id="tradelist">
<div id="tradelisttemplate" class="handlebars">
<p>{{trades.length}} trades were found.</p>
<form class="cmxform" id="trade_with" method="get" action="trade_for.php">
<input class="submit" type="submit" value=" Click Yours, Then Click Here To Go to step 2">
<fieldset>
<legend>Select THE item you brought!</legend>
<ul>
{{#trades}}
<li>
<label class="nameLabel" for="name"><img src={{pic_file1080}} alt="pic">
<br />
<input id={{id}} name="name" type="radio" value="{{id}}" required>
</label>
{{id}}
{{name}}
{{description}}
</li>
{{/trades}}
</ul>
<p>
<input class="submit" type="submit" value=" Click Yours and Go to step 2">
</p>
</fieldset>
</form>
</div>
</div>
and here is the validate method:
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("trades.json",
function(data) {
var mysource = $('#tradelisttemplate').html();
var mytemplate = Handlebars.compile(mysource);
var myresult = mytemplate(data)
$('#tradelist').html(myresult);
});
$("#trade_with").validate({
rules: {
name: {
required: true
},
},
messages: {
name: {
required: "Please select one"
},
}
});
});
</script>
I tried a form without the handlebars and it validates just fine. The above acts like there is no validation at all. Can anyone help? I have read everything I can find on the topic.
You're suggestion seems to have helped. I changed the script and it now validates, but only with the default message, not my custom message: ```
$(document).ready(function() {
$.getJSON("trades.json",
function(data) {
var mysource = $('#tradelisttemplate').html();
var mytemplate = Handlebars.compile(mysource);
var myresult = mytemplate(data)
$('#tradelist').html(myresult);
});
$("form p").on("submit", "input", function(event) {
$("#trade_with").validate({
rules: {
name: {
required: true
},
},
messages: {
name: {
required: "Please select one"
},
}
});
});
});
});
</script>
$(document).on("click", "input.submit", function (event) {
$("#trade_with").validate({
rules: {
name: {
required: true
},
},
messages: {
name: {
required: "Please select one"
},
}
});
});
