jQuery unobstrusive validation

by FrictionlessPulley

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="container">
<form id="form" role="form">Name :
    <input type="text" name="Name" value="" id="Name" />
    <br/>Score 01 :
    <input type="text" name="score-a" value="" id="score-a" />
    <br/>Score 02 :
    <input type="text" name="score-b" value="" id="score-b" />
    <br/>
    <input type="button" value="validate" id="validate" />
    <input type="submit" value="save" />
    <ul></ul>
</form>
</div>

JavaScript

$(function () {
    $('#form').validate();
    $('#validate').on('click', function () {
        $('#Name').rules('add', {
            required: true,
            messages: {
                required: 'Your Name is required.'
            }
        });

        var required = function () {
            var scorea = $.trim($('#score-a').val());
            var scoreb = $.trim($('#score-b').val());

            return scorea.length == 0 && scoreb.length == 0;
        };


        $('#score-a').rules('add', {
            required: function () {
                return required();
            },
            messages: {
                required: 'Score is required'
            }
        });

        $('#score-b').rules('add', {
            required: function () {
                return required();
            },
            messages: {
                required: 'Score is required'
            }
        });

        $('ul').append('<li>added validation</li>');
    });
});