Javascript - Working with external JS files

Question

this is my first post so apologies if I get anything wrong, just let me know.

I am trying to have an external javascript file that has functions which will be able to be reused. For instance, when I have a text field and want to validate it, I want to be able to pass over three arguments (value to check, field description and min length allowed)

At the top of my HTML (above head tag) I have my script tag: <script src="checkInputs.js"></script>

So far, I have a form. The form has these two fields (omitted some code):

<form name="join" action="createUser.php" onsubmit="return initDetails()" method="post">
<label> Choose a username: </label> <input type="text" name="username" maxlength=20><br>
<div id="uname" style="display: none; font-family:arial;color:red;font-size:12px;"></div>

The submit of the form calls the following function (I know it is calling it correctly):

    function initDetails() {
    alert("inside initDetails");
    var unamev=document.forms["join"]["username"].value;
    var pass=true;
    var usernameCheck = [];
    usernameCheck.push(checkTextField(unamev, 5, "username"));
    alert("check variables");
    alert(usernameCheck['Pass']);
    alert(usernameCheck['Error']);
    alert("check variables finished");
        if (usernameCheck['Pass']=="True"){
            alert("We pass");
            document.getElementById('uname').style.display = 'none';
        }
        else{
            alert("We fail");
            pass=false; 
            document.getElementById('uname').style.display = 'block';
            document.getElementById("uname").innerHTML = usernameCheck['Error'];
        }
    return pass;
}

So the above is responsible for grabbing the username, call calling checkTextField with my three values, and storing the returned items in an array. These are used to see if the test passed or failed, and populating the error message and displaying the hidden block with that error, and finally returning true or false to the submit.

So now for the external js file, I have the following:

    function checkTextField(fieldInput, maxLength, fieldDescription) {
alert("Inside checkInputs.js ")
var errmsg = ""; 
    if (fieldInput.length < maxLength ){
            pass=false;
            errmsg = "<li> The " + fieldDescription + " must be larger than 5 characters </li>";
        if (fieldInput == null  || fieldInput == ""){
            pass=false;
            errmsg = "<li> The " + fieldDescription + " cannot be empty </li>";     
        }
        return {'Pass': "False", 'Error': errmsg};
    }
    else{
        return {'Pass': "True", 'Error' : ""};  
    }

}

I used to have something very similar inside the HTML file that worked, but to avoid duplicated code, I wanted to have a framework of sorts to handle these. Now it could very well be that I am making a simple syntax schoolboy error, but I am trying to get up to scratch with Javascript, its not too good.

I have updated the code based on a number of suggestions posted here. It now calls the external file, and the following alerts:

        alert(usernameCheck['Pass']);
    alert(usernameCheck['Error']);

Both alerts are undefined....

Answer 1

You need to prevent the default event action. The easiest way would be to set up the event handler not on the form tag but in a script using addEventListener() . The first argument to the given event handler callback (which basically should do what your initDetails function does) is the event object:

var form = document.forms['join'];
form.addEventListener( 'submit', function( event ) {

    // prevent the default submit action
    event.preventDefault();

    // do your checks, e.g.
    var usernameCheck = checkTextField( form.['username'].value, 5, 'username' );
    // …

    if( usernameCheck === 'Pass' ) {

        // finally submit the form
        form.submit();

    }

}, false );

See also:

• https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.submit

Other changes I've done here are also mentioned in the comments above. For example using === for comparison or not pushing a value to an array, but assigning it to a simple variable ( a = b; ).

UPDATE: To solve the problem with multiple return values, you should read the answer of »theUtherSide« again. Just return an object.

Answer 2

I think your validation function is not getting called because of this line:

var usernameCheck[] = checkTextField(unamev, 5, "username");

Should be:

var usernameCheck = checkTextField(unamev, 5, "username");

If you want to declare the variable first, you could do:

var usernameCheck = [];
(You could also give it a size this way.)

An additional tip for the design of your framework:

A more scalable strategy might be to have your function return an object, rather than an array.

This way you could have it return named values, and your implementation wouldn't break if the array changes, and you don't have to worry about the size.

For example, instead of: return ["Fail", errmsg];

Do: return {'Pass': true, 'msg': errmsg};

Then, in the implementation: usernameCheck[1];

Becomes: usernameCheck['msg'];