Basic validation
Start with this basic validation example that shows the validation of requireds text fields. Try to submit the form without fill out the text fields.
- The First Name and Last Name fields are required.
- Try to submit the form without fill out the fields.
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<meta charset="utf-8">
</head>
<body>
<form>
<!--Required text field-->
<input type="text" placeholder="First name" class="mr" required> <br>
<!--Validation feedback-->
<p class="mr-feedback mr-required-fb">Please fill out this field</p>
<!--Required text field-->
<input type="text" placeholder="Last name" class="mr" required> <br>
<!--Validation feedback-->
<p class="mr-feedback mr-required-fb">Please fill out this field</p>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
<!--myrules-->
<script src="https://cdn.jsdelivr.net/gh/AlbertoAdolfo27/myrules/dist/myrules.js"></script>
</body>
</html>
Explaning the code
.mr - class that indicates that the form element must be validated by myrules.
required - is an validation attribute, it specifies that the element value is required, it must be filled out before submitting the form. myrules uses classes and attributes to validate the form elements. Learn about Classes and Attributes of Validation.
.mr-required-fb is the feedback class of required validation attribute. Feedback classes are classes used to display feedbacks of validation of the elements. The element with .mr-required-fb class will displayed when the required element was invalid (empty value).
The .mr-feedback class indicates the element where the validation feedback will be placed.
For each form element with .mr class it needs its corresponding element with .mr-feedback class. The number of element with .mr and .mr-feedback classes must be the same in the form.