Currently I'm doing things like this for client side validation, however it seems "dated" is there a better way of doing it? I.E more current way...that isn't HTML5

function validateUsername(username, error){
        var username = document.getElementById("username").value,
        error = document.getElementById("usernameErr");

   if(username == null || username==""){      
    document.getElementById("username").style.borderColor = "red";   
    return error.innerHTML = "Username is required";
    return false;
   }
    else if(!username.match(/^[0-9a-z]{3,}$/)){
    return error.innerHTML = "Username must be three characters long";
    return false;
   }
   else{
       document.getElementById("username").style.removeProperty('border'); 
       return error.innerHTML = "";
       return true;
   }
}

    Do you really need to pass "username" and "error" into your JS function? Your current code is overwriting it upon assignment.

    Seems to me it's fine except for a couple bugs and maybe some formatting. What most JS guys do, of course, is use a library like jQuery instead; all it would do in this instance is save a few keystrokes, for the most part (I will admit typing "document.getElementById" 10 times is rather tedious).

    I'll leave it in native JS, however:

    function validateUsername() {

'use strict'; // because Crockford

var username, error; //init vars

//assignments
username    = document.getElementById("username").value, 
error           = document.getElementById("usernameErr"); 
error.innerHTML = ""; 

//logic
if (username == null || username == "") {

    document.getElementById("username").style.borderColor = "red";

    error.innerHTML = "Username is required";  //you cannot return twice ... so I removed "return" ;)

}  else if (!username.match(/^[0-9a-z]{3,}$/)) { 

    error.innerHTML = "Username must be three characters long"; 

} else{

    document.getElementById("username").style.removeProperty('border');  

}

// we can return the length of error.innerHTML which will be "0" is there's no error. This might affect dependent code.
//alternately, use an if/else to return true/false, 1/0, whatever...

return error.innerHTML.length;  
}

      Far as "saving a few keystrokes" goes...

      function validateUsername() {

'use strict'; // because Crockford

var username, error; //init vars
var d = document.getElementById;

//assignments
username    = d("username").value, 
...

        Well I was told onchange ect. Was defunct these days for validation

          Weedpacket;11065195 wrote:

          Far as "saving a few keystrokes" goes...

          function validateUsername() {

'use strict'; // because Crockford

var username, error; //init vars
var d = document.getElementById;

//assignments
username    = d("username").value, 
...

          Gold, of course. 🙂

          And in so doing you've just created a new JS Framework, right? Can we please call it "Dframe", or "YodelPenguin" or something? 😃

          cluelessPHP wrote:

          Well I was told onchange ect. Was defunct these days for validation

          I suppose that depends on what you're doing. Some forms, for example, will validate backend via AJAX when a box is filled or whatnot (in particular, I'm thinking of "username already exists", or making sure the password was typed correctly both times ) ....

            dalecosp;11065205 wrote:

            Gold, of course. 🙂

            And in so doing you've just created a new JS Framework, right? Can we please call it "Dframe", or "YodelPenguin" or something? 😃

            No no call it operation Gazebo :p

            dalecosp;11065205 wrote:

            I suppose that depends on what you're doing. Some forms, for example, will validate backend via AJAX when a box is filled or whatnot (in particular, I'm thinking of "username already exists", or making sure the password was typed correctly both times ) ....

            Well I'm trying this style "mobile" first nonsense apparently all the cool kids do it now so this is the form I'm validating, currently I was thinking JavaScript and PHP validation which is "wrong" or "old fashioned" apparently

            Register

              Well I finally got home to try and got

              Uncaught TypeError: Illegal invocation

              
function validateUsername() {

'use strict'; // because Crockford

var username, error; //init vars
var d = document.getElementById;

//assignments
username    = d("username").value, 
error           = document.getElementById("usernameErr"); 
error.innerHTML = ""; 

//logic
if (username == null || username == "") {

    document.getElementById("username").style.borderColor = "red";

    error.innerHTML = "Username is required";  //you cannot return twice ... so I removed "return" ;)

}  else if (!username.match(/^[0-9a-z]{3,}$/)) { 

    error.innerHTML = "Username must be three characters long"; 

} else{

    document.getElementById("username").style.removeProperty('border');  

}

// we can return the length of error.innerHTML which will be "0" is there's no error. This might affect dependent code.
//alternately, use an if/else to return true/false, 1/0, whatever...

return error.innerHTML.length;  
}

                Hmm, which browser says that? In FFox I got:

                FireFox 57 wrote:

                TypeError: 'getElementById' called on an object that does not implement interface Document.

                I'd suggest to try it without Weedpacket's shortcut.

                If you want a "shortener", you might do this:

                var d = document;
d.getElementById("whatever_goes_here");
                  Write a Reply...