JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<div class="error"></div>

<form id="myForm">
	<div class="form-group">
    <p class="col-xs-8 col-xs-offset-4 col-sm-9 col-sm-offset-3"><strong>Question 1</strong></p>
    <label for="percentage_paratransit" class="control-label col-xs-4 col-sm-3">Question %</label>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <input type="number" name="percentage_paratransit" id="percentage_paratransit" value="" class="form-control" data-parsley-type="number" required="">
    </div></div>
<div class="form-group">
    <label for="percentage_fixedroute" class="control-label col-xs-4 col-sm-3">Question %</label>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <input type="number" name="percentage_fixedroute" id="percentage_fixedroute" value="" class="form-control" data-parsley-type="number" required="">
    </div></div>
<div class="form-group">
    <label for="percentage_demandresponse" class="control-label col-xs-4 col-sm-3">Question %</label>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <input type="number" name="percentage_demandresponse" id="percentage_demandresponse" value="" class="form-control" data-parsley-type="number" required="">
    </div></div>
<div class="form-group">
    <label for="percentage_destinationroute" class="control-label col-xs-4 col-sm-3">Question%</label>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <input type="number" name="percentage_destinationroute" id="percentage_destinationroute" value="" class="form-control" data-parsley-type="number" required="">
    </div></div>
<div class="form-group">
    <label for="percentage_mealdelivery" class="control-label col-xs-4 col-sm-3">Question %</label>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <input type="number" name="percentage_mealdelivery" id="percentage_mealdelivery" value="" class="form-control" data-parsley-type="number" required="">
    </div></div>
<div...

JavaScript

$("#myForm").validate({

        rules: {
            percentage_paratransit: {
                required: true,
                number: true,
                min: 0,
                max: 100,
            },
            percentage_fixedroute : {
                required: true,
                number: true,
                min: 0,
                max: 100,
            },
            percentage_demandresponse : {
                required: true,
                number: true,
                min: 0,
                max: 100,
            },
            percentage_destinationroute : {
                required: true,
                number: true,
                min: 0,
                max: 100,
            },
            percentage_mealdelivery : {
                required: true,
                number: true,
                min: 0,
                max: 100,
            },
            percentage_other : {
                required: true,
                number: true,
                min: 0,
                max: 100,
            }

        },
        submitHandler: function(form){
            var total = parseInt($("#percentage_paratransit").val()) + parseInt($("#percentage_fixedroute").val()) + parseInt($("#percentage_demandresponse").val()) + parseInt($("#percentage_destinationroute").val()) + parseInt($("#percentage_mealdelivery").val()) +  parseInt($("#percentage_other").val());
            if (total != 100) {
                $(".error").html("Your total must sum to 100.")
                          return false;
            } else alert("valid");
        }

    });