Quick Javascript form query

Question

I have coded a very simple javascript form, however I cant get it to run properly. As you will see in the below code & fiddle. I need the form to validate all the sections and ensure that only alphanumerical information is added in first name and the last name boxes. Also I would like to form to return an error when nothing is entered in 1 or all of the fields.

I'm new to Javascript coding so please can someone assist me with this query. I'm sure there will be a quick and easy fix.

Thanks in advance.

https://jsfiddle.net/cal122/juwt6wvv/6/

function ValidationEvent() {

    var name = document.getElementById("name").value;
    var email = document.getElementById("name2").value;
    var contact = document.getElementById("message").value;

    if (name != '' && name2 != '' && message != '') {
        if (/^([\w-\.]+ $/.test(name)) {
            alert("All type of validation has done on OnSubmit event.");
            return true;
        } else {
            alert("Please provide valid first name!");
            return false;
        }
    } else {
        alert("Please provide valid second name!");
        return false;
    }
    } else {
        alert("Please put some text in the message box");
        return false;
    }
    } else {
        alert("All fields are required.....!");
        return false;
    }
}

.main {
	width:333px;
	padding:10px;
	margin-top:20px;
	margin-right:-28px;
	border:1px solid black;
	float:right;
	z-index:-1;
}
input[type=text] {
	width:100%;
	height:40px;
	padding:5px;
	margin-bottom:25px;
	margin-top:5px;
	border:2px solid #ccc;
	color:#4f4f4f;
	font-size:16px;
}

label {
	color:black;
	font-size:14px;
}
input[type=submit] {
	font-size:18px;
	background: #CF1559;
	cursor:pointer;
	width:40%;
}
input[type=submit]:hover {
	background: #fff;
}

<form action="#" method="post" onsubmit="return ValidationEvent()">
<label>First Name:</label>
<input id="name" name="name" placeholder="Enter your name" type="text">
<label>Last Name:</label>
<input id="name2" name="name2" placeholder="Enter your last name" type="text">
<label>Message:</label>
<input id="Message" name="Message" placeholder="" type="text">
<input type="submit" value="Submit">
</form>

Answer 1

The primary issue is that you are not using your regular expression correctly.

This line:

if (name == /^([\w-\.]+ $) {

Should look something like this:

if (/^([\w-\.]+)$/.test(name)) {

Note that the regular expression is wrapped in slashes (/ /). We also utilize the test function to determine if the value of name is found by the RegExp object.

I would recommend reading up on regular expression on MDN:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Additionally, there are a number of online RegExp testing tools to help you try your patterns. I like to use RegExp 101: https://regex101.com/

The secondary issue is that the if / else logic is very broken:

if (name != '' && name2 != '' && message != '') {
    if (/^([\w-\.]+ $/.test(name)) {
        alert("All type of validation has done on OnSubmit event.");
        return true;
    } else {
        alert("Please provide valid first name!");
        return false;
    }
} else {
    alert("Please provide valid second name!");
    return false;
}
} else {
    alert("Please put some text in the message box");
    return false;
}
} else {
    alert("All fields are required.....!");
    return false;
}

You do not have if statements that match up with your else statements for the other cases you are trying to trap for:

if (name != '' && name2 != '' && message != '') {
    if (/^([\w-\.]+)$/.test(name)) {
        alert("All type of validation has done on OnSubmit event.");
        return true;
    } else {
        alert("Please provide valid first name!");
        return false;
    }
    if (/^([\w-\.]+)$/.test(name2)) {
        return true;
    } else {
        alert("Please provide valid second name!");
        return false;
    }
    if (/^([\w-\.]+)$/.test(message)) {
        return true;
    } else {
        alert("Please put some text in the message box");
        return false;
    }
} else {
    alert("All fields are required.....!");
    return false;
}

Here, there is an if for every else. Beyond this, the validation may not work if you have incorrect regular expression. I cannot correct that here, but you should be able to utilize the links above to fix that yourself. Bear in mind that you should never rely on client side validation and should always double-check your validation on the server side before it goes to a database or API.