External JavaScript problems

Question

I'm using JS for the first time. Can't seem to call an external JS function at all. I have a HTML form and im trying to call a function so if the first name box is empty, I get a message saying to fill in a name.

My form

<head>
<script type="text/javascript" src="scripts/validation.js"></script>
</head>

<body>
 <form name="myForm" method="post" action="somewhere.html" 
   onsubmit="validation()">

<fieldset id="PersonalDetails">
    <legend>Personal Details</legend>
    <div class="form" id="firstname">
    <p>First Name: <br />
    <input type="text" name="firstname" />
    </p>
    </div>
 </fieldset>
  </form>
 </body>

In the JS file:

 function validation(){
 var x=document.forms["myForm"]["firstname"].value;
 if (x==null || x=="")
 {
 alert("First name must be filled out!!!!");
 return false;
 }
}

Open up your developer console (usually F12 does it, but it varies) - do you see any errors? If you're a new dev, I can't stress the importance of the console enough, it's your best friend. — tymeJV
– tymeJV, Commented May 6, 2014 at 19:03
I don't see anything, but I don't know what im looking for. I'm just wondering how to call the funtion correctly. I know how to do it if the JS is in the HTML file, but not for an external js file — John Setter
– John Setter, Commented May 6, 2014 at 19:08
You're function call works, see jsfiddle - jsfiddle.net/ej7tY — xxx
– xxx, Commented May 6, 2014 at 19:23

xxx · Accepted Answer · 2014-05-06 19:07:41Z

2

you need to have a submit button in your form trigger the onsubmit event. Your function will be called if you've imported your javascript correctly. See below you're form with a submit button.

<body>
 <form name="myForm" method="post" action="somewhere.html" 
   onsubmit="validation()">

<fieldset id="PersonalDetails">
    <legend>Personal Details</legend>
    <div class="form" id="firstname">
    <p>First Name: <br />
    <input type="text" name="firstname" />
    </p>
        <input type='submit' value='submit'/>
    </div>
 </fieldset>
  </form>
 </body>

answered May 6, 2014 at 19:07

xxx

1827 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2486570 · Accepted Answer · 2014-05-06 19:12:07Z

1

Just change onsubmit="validation()" to onsubmit="return validation()"

answered May 6, 2014 at 19:12

user2486570

1,0129 silver badges14 bronze badges

Comments

ukung · Accepted Answer · 2014-05-06 20:08:19Z

0

Try this

change your form

<form name="myForm" method="post" action="#" onsubmit="validation()">

change your javascript

function validation(){
 var x=document.forms["myForm"]["firstname"].value;
 if (x==null || x==""){
     alert("First name must be filled out!!!!");
     return false;
 }else{
    document.forms["myForm"].setAttribute("action", "somewhere.html").submit();
 }
}

answered May 6, 2014 at 20:08

ukung

4201 gold badge6 silver badges13 bronze badges

Collectives™ on Stack Overflow

External JavaScript problems

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related