Add more dynamic repeat block validation using Jquery validate

I already share demo of add more and remove feature of dynamic block of html using jQuery in previous post. Now how to apply validation for all dynamic fields using jQuery validate js

Step 1 : I have used previous blog HTML for jQuery validation of dynamic multiple fields.

You can see in my previous blog post and refer the html (step 1) for same.

Step 3: Add script files of jQuery and jQuery validate js for validation.

Step 2 : I have created  addValidationToSteps() function to validate all repeat fields of recipe preparation steps. Which I called  after page load and add another steps and remove steps.

    $(document).ready(function () {
        $("#totalSteps").val("1");
        addValidationToSteps();  
       });

    $("#addAnotherStep").click(function () {
 //Add repeat block logic 
        addValidationToSteps();
    });

Step 3 : Remove other block except  first block

$(document).on("click", "#removeStep", function () {
        $("#dialog").text('');
        $("#dialog").text('Are you sure to remove this step? This cannot be undone.');
        $("#dialog").dialog({
            resizable: false,
            height: 140,
            width: 400,
            modal: true,
            buttons: {
                "Ok": function () {
                   //add here remove dynamic block logic
  addValidationToSteps();

                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
    });

Step 4 : I want to display each field label as a message (i.e. "Please enter Step Name") instead of this field required default message of jQuery validation. Jquery validate give us rules functionality to add dynamic field html validation as presenting below example.

 
    function addValidationToSteps() {
        $(".recipeSteps input").each(function () {
            var labelMsg = "Please enter " + $(this).attr("placeholder") + ".";
            $(this).rules("add", {required: true, messages: {required: labelMsg}});

        });
        $(".recipeSteps textarea").each(function () {
            var labelMsg = "Please enter " + $(this).attr("placeholder") + ".";
            $(this).rules("add", {required: true, messages: {required: labelMsg}});
        });
        $(".temperature").rules("add", {number: true});
    }