JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
<form id="cc_form" method="post" action="">
    <div id="container">
    <div id="block1">
        CC_number_1 : <input type="text" id="number_1" name="number_1"/> <br/>
    </div>
    <div id="block2">
        CC_number_2 : <input type="text" id="number_2" name="number_2"/> <br/>
    </div>
    <div id="block3">
        CC_number_3 : <input type="text" id="number_3" name="number_3"/> <br/>
    </div>
    </div>
    <input type="submit" value="submit" name="submit"/>
    </form>

JavaScript

$(document).ready(function()
                  {
/*$("#cc_form").validate({

    rules:{
    "[name^='number_']":{
    required:true
    }

    },
    messages:{
    "[name^='number_']":{
    required:"Enter number"
    }
    }


    });*/
                      
$("#cc_form").validate({

    rules:{
    "number_1":{
    required:true
    },
    "number_2":{
    required:true
    },
    "number_3":{
    required:true
    }

    },
    messages:{
    "number_1":{
    required:"Enter number"
    },
    "number_2":{
    required:"Enter number"
    },
    "number_3":{
    required:"Enter number"
    }
    }


    });                      
                      
                  });