how to call an external javascript method from a f

问题:

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>

回答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.

回答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()"