custom form validation not working

Question

I am having form -

<script type="text/javascript">
    //< ![CDATA[
        var customForm = new VarienForm('createstore');
    //]]>
</script>

    <form class="form-inline" action="createstore/index/create" method="post" id="createstore">
      <div class="form-group">
        <label class="sr-only" for="exampleInputEmail3">First Name</label>
        <input type="text" class="form-control validate-uppercase" name="firstname" id="exampleInputEmail3" placeholder="First Name">
      </div>
      <div class="form-group">
        <label class="sr-only" for="exampleInputEmail3">Email address</label>
        <input type="email" class="form-control validate-email" name="email" id="exampleInputEmail3" placeholder="Email address">
      </div>
      <div class="form-group">
        <label class="sr-only" for="exampleInputPassword3">Password</label>
        <input type="password" class="form-control" name="password" id="exampleInputPassword3" placeholder="Password">
      </div>
      <br>  
        <input type="submit" name="submit" value="Submit">
    </form>

and also add js file -

Validation.add('validate-uppercase','Input must be in uppercase',function(v){
    return Validation.get('IsEmpty').test(v) || (!/^[A-Z]+$/.test(v));
});

validation is not working.

Answer 1

Use this below code to trigger validation:

var validator = new Validation('createstore', {immediate : true});
validator.validate()

Answer 2

Try to place that code after the form (not before as in the example)

<script type="text/javascript">
//< ![CDATA[
    var customForm = new VarienForm('createstore');
//]]>