My form is submitted by a link using JavaScript, but I am also trying to validate the from justing jQuery validate. The validation doesn't work when submitted by the link, but it does if I change the link to a submit button. What am I doing wrong?
My form:
<form id="findmatch" method="post" action="search">
<div>
<label class="formlabel">Match Type
<input type="text" name="matchtype" id="matchtype" class="forminput" />
</label>
<label class="formlabel">Location (postcode)
<input type="text" name="location" id="location" class="forminput" />
</label>
<label class="formlabel">Radius (miles)
<input type="text" name="Radius" id="Radius" class="forminput" />
</label>
<label class="formlabel">Keywords
<input type="text" onblur="javascript:usePointFromPostcode(document.getElementById('location').value, showCompleteLatLng)" onchange="javascript:usePointFromPostcode(document.getElementById('location').value, showCompleteLatLng)" name="keywords" id="keywords" class="forminput" />
</label>
<input id="lat" class="hidden" name="lat" type="text" value="" />
<input id="lon" class="hidden" name="lon" type="text" value="" />
<a href="javascript:document.getElementById('findmatch').submit();" onmouseover="javascript:usePointFromPostcode(document.getElementById('location').value, showCompleteLatLng)" class="submit">Search</a>
</div>
</form>
And my jQuery is
<script type="text/javascript">
$(document).ready(function () {
$("#findmatch").validate({
rules: {
location: "required",
Radius: {
required: true,
digits: true
},
keywords: "required"
},
messages: {
location: "Please enter your postcode",
Radius: {
required: "Please enter a radius",
digits: "Please only enter numbers"
},
keywords: "Please enter the keywords you wish to search for"
}
});
});
</script>
