Response title
This is preview!
jquery form validation label has multiple classes - valid, error, valid!!!
in Getting Started
•
9 years ago
Since making the post below I obtain a little more information, it turns out that the label created during validation has 2 classes - error and valid and the input tag has a class=valid as well!!! Go figure.
Using Chrome developer tools the following code is the result after validation:
<label for="station">Station: </label>
<input type="text" id="station" name="station" maxlength="7" class="valid">
<label for="station" class="error valid"></label>
Original post -
OK, I have a very simple piece of code that all it does is validate a text field. When that is all there is, it works fine. When I add a remote rule it does not validate until I press the submit button and the alert telling me the form is submitted does not show. In addition, if I click anywhere else on the page (change focus) the text field is not validated when the remote rule is used. This occurs when the return value of the remote call is "true", when the return is "false" nothing at all happens until I press the submit button, and it shows the text field as being validated instead of an error!
Thank you in advance for your patience and assistance,
Shimon
Here is the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Research by Call Sign</title>
<style>
label, #station
{
margin-left:5px;
float: left;
}
input
{
border: 1px solid black; margin-bottom: .5em;
}
input.error
{
border: 1px solid red;
}
label.error
{
background: url('images/unchecked.gif') no-repeat;
padding-left: 16px;
margin-left: 10px;
}
label.valid
{
background: url('images/checked.gif') no-repeat;
display: block;
width: 16px;
height: 16px;
}
</style>
</head>
<body>
<form id="myform">
<label for="station">Station: </label>
<input type="text" id="station" name="station" maxlength="7" />
<br /><br />
<input type="submit" value="Submit">
</form>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults(
{
debug: true,
success: "valid"
});
$( "#myform" ).validate(
{
rules:
{
station:
{
required: true,
// When "remote" is added nothing works as it should... "check-callsign.php" only returns "true"
remote: "check-callsign.php"
},
},
messages:
{
station: "Call Sign NOT FOUND"
},
// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
alert("submitted!");
},
});
</script>
</body>
</html>
the code for "check-callsign.php" is as follows:
<?php
echo "true";
?>
1