Uncaught ReferenceError: validate is not defined (jQuery validation)

Question

I am getting this error and the script never seems to work.

Uncaught ReferenceError: validate is not defined

I also tried to call the function onsubmit from the and also tried to place the function inside the page and in a separate JS file but same results. The html file:show.gsp

<body>

<div class="row">
    <div class="col-md-9 col-sm-9">
        <g:form class="form-inline" role="form" action="update" name="form" >
            <div class="form-group has-feedback">
                <label class="control-label" for="mcc">GSM.Identity.MCC</label>
                <br/>
                <input type="text" class="form-control required" name="mcc" id="mcc" value="${mcc}">
                <span class="glyphicon form-control-feedback"></span>
            </div>
            <br/>
            <br/>

            <div class="form-group has-feedback">
                <label class="control-label" for="mnc">GSM.Identity.MNC</label>
                <br/>
                <input type="text" class="form-control required" name="mnc" id="mnc" value="${mnc}">
                <span class="glyphicon form-control-feedback"></span>
            </div>
            <br/>
            <br/>

            <div class="form-group has-feedback">
                <label class="control-label" for="co">GSM.Radio.CO</label>
                <br/>
                <input type="text" class="form-control required" name="co" id="co" value="${co}">
                <span class="glyphicon form-control-feedback"></span>
            </div>
            <br/>
            <br/>
            <p>
                <button type="submit" class="btn btn-success btn-sm" id="submit" onclick="validate()">Save Settings</button>
                <g:link action="restart" class="btn btn-danger btn-sm">Restart OpenBts</g:link>
            </p>
        </g:form>
    </div>
</div>

</body>
<script src="${resource(dir:'js', file:'main_script.js') }"></script>

and the script: main_script.js

//validation script
function validate(){

    console.log("test");

    var mcc = $("#mcc").val();
    var mnc = $("#mnc").val();
    var co = $("#co").val();

    if (!$.isNumeric(mcc)){
        $("#mcc").parent("div").removeClass("has-feedback has-error has-success").addClass("has-error");
    }
    if (!$.isNumeric(mnc)){
        $("#mnc").parent("div").removeClass("has-feedback has-error has-success").addClass("has-error");
    }
    if (!$.isNumeric(co)){
        $("#co").parent("div").removeClass("has-feedback has-error has-success").addClass("has-error");
    }
}

that did work, am having a hard time understanding why though, shouldn't it just work after the body since it's in the same page. — Hussein Shehady, Nov 20 '14 at 10:18
oh and i had a syntax error there so i fixed it. but that was not the problem so thank you again. maybe you want to it that as answer? — Hussein Shehady, Nov 20 '14 at 10:20

score 5 · Accepted Answer · edited May 23 '17 at 11:46

Javascript must be loaded within <head> or <body> tags.

you have added script tag after </body> tag, thats why it is not getting loaded and button event can't find validate() function which is within that Javascript

Add it before </body> tag as follows,

    .
    .
    .
            </g:form>
           </div>
         </div>

    <script src="${resource(dir:'js', file:'main_script.js') }"></script>
   </body>

As This Link says it should be used within <body> tag

Uncaught ReferenceError: validate is not defined (jQuery validation)

1 Answers1