Form validation in meteorjs

Question

I am doing simple validation of inputs in meteorjs, after first tour it works, and every next time it doesn't work (until I reload the page) – it means error messages are not displayed.

//main.js//
Template.addMealForm.events({
    'click #submitNewMeal': function (ev) {
        ev.preventDefault();
        var query = {
            name: $("#name").val().trim(),
            price: $("#price").val(),
            calories: $("#calories").val(),
            category: $("#category").val()
        };
        areInputsValid(query);
    }
});

var areInputsValid = function (query) {
    if ((query.name.length === 0) || (query.price.length === 0) || (query.calories.length === 0)) {
        $("#warningLabel").addClass("di")
        $(".warningLabel").text("All fields are required");

    }
    else if ((isNaN(query.price) === true) || (isNaN(query.calories) === true)) {
        $("#warningLabel").addClass("di")
        $(".warningLabel").text("To Price and Calories fields please enter a number");
    }
    else {
        console.log('it works');
        $('.dn').hide();
    }
};

//main.html//

<template name="addMealForm">                
        <form role="form">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control input_form" id="name" placeholder="Name of the meal">
            </div>
            <div class="form-group">
                <label for="price">Price</label>
                <input class="form-control input_form" id="price" placeholder="Price">
            </div>
            <div class="form-group">
                <label for="calories">Calories</label>
                <input class="form-control input_form" id="calories" placeholder="Calories">
            </div>                
            <div id="warningLabel" class="form-group has-error dn">
                <label class="control-label warningLabel"></label>
            </div>
            <button id="submitNewMeal" type="submit" class="btn btn-rimary">Add</button>
        </form>
</template>

Answer 1

The problem is that you are calling $('.dn').hide() in the success case. Because #warningLabel has a class of dn it will not be displayed again on subsequent errors.

One solution is to add $('.dn').show() to the top of areInputsValid.

Answer 2

You already have Tracker as part of Meteor, so I put a little tutorial and JSfiddle together on how to use it to implement a typical form validation scenario.

http://bit.ly/meteor-form-validation-video

http://bit.ly/meteor-form-validation-fiddle