JSFiddle - React, Tailwind, and code Playground

by marhaba

HTML

<script src="http://test.agripartner.com/AgroVision/Scripts/Library/jquery.validate-1.9.0.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>

<body>
    <form id="testForm" action="#">
        <input id="1" name='a' class="nameVal" type="text" /><br/>
        <input id="2" name='b' class="numberVal" type="text" /><br/>
        <input id="3" name='c' class="nameVal" type="text" /><br/>
        <input id="4" name='d' class="numberVal" type="text" /><br/>
        <input id="5" name='e' class="nameVal" type="text" /><br/>
        <input id="6" class="numberVal" type="submit"/>
    </form>
    <div style="color: red" id="validatorMessage"></div>
</body>
</html>

JavaScript

jQuery.validator.addClassRules({
        nameVal: {
            required: true,
            maxlength: 10
        },
        numberVal: {
            required: true,
            number: true,
            min: 1,
            max: 5,
            maxlength: 10
        }
    });

$(document).ready(function () {               
    $('#testForm').validate();

    $('#testForm').submit(function () {
        var validator = $('#testForm').validate();    
        var valid = $('#testForm').valid();
        var invalids = validator.numberOfInvalids();
        
        $('#validatorMessage').html('number of invalids: ' + invalids);        
        
         return false;
    });
});