how to call an external javascript method from a form?

Question

I want to submit a form. But before that I wanna validate it. The validation is a javascript method. everything is ok as long as the javascript method is in the same .jsp file as the form.

But I want to put it to an external javascript file, and the method gets never called. Why?

this part should include the javascript into .jsp file.

  <script type="text/javascript" src="Validate.js">
    var val = new Validate();
    var result= val.validateArticle();
</script>

here is the form I want to submit:

<form name="articleAnswerForm" action="answer.html"
        action="answer.html" onsubmit="return result" method="post">
        Was is der Artikel?<br> <select name="art">
            <option>???</option>
            <option>der</option>
            <option>die</option>
            <option>das</option>
        </select> <input type="hidden" name="richtig" value="${selected.article}">
        <h1>${selected.german}</h1>
        <input type="submit" value="Antworten">
    </form>

The Validate.js is in the same directory as the .jsp file. here is the Validate.js (but it works fine, if it is in the .jsp file.)

function validateArticle() {
    var a = document.forms["articleAnswerForm"]["art"].value;
    var richtig = document.forms["articleAnswerForm"]["richtig"].value;
    if (a == null || a == "" || a != richtig) {
        alert("Nein " + a + " ist falsch");
        return false;
    }
}

so far the only thing that works is if I put everything into one .jsp file like below

    <script type="text/javascript" >
function validateArticle() {
    var a = document.forms["articleAnswerForm"]["art"].value;
    var richtig = document.forms["articleAnswerForm"]["richtig"].value;
    if (a == null || a == "" || a != richtig) {
        alert("Nein " + a + " ist falsch");
        return false;
    }
}
</script>

    <form name="articleAnswerForm" action="answer.html"
        action="answer.html" onsubmit="return validateArticle()" method="post">
        Was is der Artikel?<br> <select name="art">
            <option>???</option>
            <option>der</option>
            <option>die</option>
            <option>das</option>
        </select> <input type="hidden" name="richtig" value="${selected.article}">
        <h1>${selected.german}</h1>
        <input type="submit" value="Antworten">
    </form>

    <form:form method="post" action="word.html">
        <input type="submit" value="nächste Wort">
    </form:form>
</c:if>

Solution 1

This is all you need. You don't need to create an instance to use the Validation function.

Script:

<script type="text/javascript" src="Validate.js"></script>

HTML Form:

<form name="articleAnswerForm" action="answer.html"
    action="answer.html" onsubmit="return validateArticle()" method="post">
    Was is der Artikel?<br> <select name="art">
        <option>???</option>
        <option>der</option>
        <option>die</option>
        <option>das</option>
    </select> <input type="hidden" name="richtig" value="${selected.article}">
    <h1>${selected.german}</h1>
    <input type="submit" value="Antworten">
</form>

So when you are moving Javascript to an external file. You don't need to do anything special to access it. There is no instantiation required. Just use the javascript as you would if it was included in the file itself. If you find it doesn't work, it's likely the file isn't loading properly, in which case check the file is in the right directory and the case of file is correctly set, as some file system are case sensitive.

Solution 2

First, you cannot mix a src-ref and local code in one script tag.

<script type="text/javascript" src="Validate.js"></script>
<script type="text/javascript">
    var val = new Validate(); // 'new Validate' won't work.
    var result= val.validateArticle();
</script>

In HTML, onsubmit="return result" will probably not do what your are intended to. You want to validate on submit, won't you? So you have to call the validateArticle() function then, not on page load. And there is no need to instanciate a Validate object.

onsubmit="return validateArticle()"

Comments

[Scott]

That won't work because the validation is happening as soon as the javascript is loaded not when the form is submitted.

[Scott]

@Mulmoth Can you make it clear that the var val = new Validate; is wrong usage. This is supposed to be a clear answer for other people in the future. Perhaps // Incorrect usage comment or something. Just a thought.

[Sanyifejű]

No, something must be missing, it does not work. I have edited the original question, please have a look at it.

[Scott]

If you have followed my answer and it is not working. Then can you confirm that you have Validate.js in the same directory as the webpage, and check that case of the filename matches the reference in webpage. As there is no reason for it not to work.

[Scott]

Also ensure in your .js file you haven't included <script type ...> tags