CODEWITHSUNDEEP
javascriptjqueryhtml
Pavel
Pavel

Reputation: 2101

How to calling js code in html?

I have html with js in one file. I want had two different files js, and html.

This is all in one file (first case), and this code work :

<html>
<head>
    <title>menu</title>
    <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

</head>
<body>
<div class="container">
    <h2>Registration</h2>
    <form id="commentForm" method="post" action="Servlet" name="add_data">

        <label for="username">First Name</label>
        <input type="text" name="username" id="username" />

        <button type="submit">Register</button>

    </form>
    <script type="text/javascript">
        $(function() {
            // Initialize form validation on the registration form.
            // It has the name attribute "registration"
            $("form[name='add_data']").validate({
                // Specify validation rules
                rules: {
                    username: {
                        required: true,
                        minlength: 5
                    }
                },

                messages: {
                    username: "Please enter your firstname"
                },

                submitHandler: function(form) {
                    form.submit();
                }
            });
        });
    </script>
</div>
</body>
</html>

But when I create second file valid.js and move all JavaScript code, this is don't work (second case):

<html>
<head>
    <title>Меню</title>
    <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
    <script src="valid.js"></script>

</head>
<body>

<div class="container">
    <h2>Registration</h2>
    <form id="commentForm" method="post" action="Servlet" name="add_data">

        <label for="username">First Name</label>
        <input type="text" name="username" id="username" />

        <button type="submit">Register</button>

    </form>
</div>
</body>
</html>

And file valid.js which exist in same folder with html file. This is copy of code in <script> block in first example.

$(function() {
    $("form[name='add_data']").validate({
        rules: {
            username: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            username: "Please enter your firstname"
        },

        submitHandler: function(form) {
            form.submit();
        }
    });
});

HTML and JS files in same directory. May be I need call in html my js code? There my mistake? Why second case don't work? How to fix this issue?

Upvotes: 1

Views: 170

Answers (3)

Naga Sai A
Naga Sai A

Reputation: 10975

JSP and JS files code are working fine and I have created plunker for reference - http://plnkr.co/edit/cRUr4AeWGMoJhEv5MRJw?p=preview

Issue from the screenshot and console error is that the placement of JS file in your directory sructure.

All files under WEB-INF is unavailable to the outside. Place your static file under WEB-INF folder and move JS files out of WEB-INF and it will work.

Change the reference of js path in the reference after moving valid.js out of WEB-INF

 <script src="**valid.js**"></script>

Upvotes: 2

user8190318
user8190318

Reputation:

Add <script src="valid.js"></script> at the end of body tag.

Upvotes: 0

pacificpelican
pacificpelican

Reputation: 363

It seems to also work in the second case. You could try putting the script tag at the bottom of the page and use this tag

script src="valid.js" type="text/javascript"

with the type property included to be consistent with the first case, and you may want to serve static files in a dev environment using some sort of web server instead of dragging the files into the browser. But, it should work.

Upvotes: 0

Related Questions