Develop Reference

Is there a way to fix the email and title validation in my CSS and JavaScript?

I am trying to validate my email and Title input field but it still aloows me to submit the page. Where is the error in the code please?
if(email == "") {
printError("emailErr", "Please enter your email address");
} else {
var regex = /^\S+#\S+\.\S+$/;
if(regex.test(email) === false) {
printError("emailErr", "Please enter a valid email address");
} else{
printError("emailErr", "");
emailErr = false;
}
}
if(title == "Select") {
printError("titleErr", "Please select your title");
} else {
printError("titleErr", "");
titleErr = false;
}
if((nameErr || emailErr || titleErr) == true) {
return false;
}
I expect it to provide an error message when the submit button is clicked. Link to my entire code https://jsfiddle.net/lizzyblue02/spmygzdw/

Overall it works fine, I just had to make a couple of changes.
Your input type="submit" submits the form every time it is clicked, even if the form validation returned errors. I changed it in input type="button", and the form is now submitted using JavaScript and only if the form validation returned no error.
As mentioned in the above comment, you also needed to close the validate function later in the function.
You can see result here.

Why Javascript validation is not working in html form?

When i try name box is fill with character it always show that "Name must be in character only.".
Here is Javascript code:
function validate_form() {
if (!(/^[A-Za-z]+$/).test(document.emp.new_name.value)) {
alert("Name must be in character only.");
return false;
}
if (!(/^\d{10}$/).test(document.emp.new_number.value)) {
alert("Enter valid mobile number");
return false;
}
if (!(/^[0-9.]+$/).test(document.emp.new_salary.value)) {
alert("salary must be numeric");
return false;
}
if (!(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/).test(document.emp.new_email.value)) {
alert("You have entered an invalid email address!")
return (false);
}
alert ("success");
return true;
}

Because initially it does not have any characters, try adding a check to character length
Checkout example
$("#submit").on("click",function(){
var name = $("#name").val();
if (name.length>0 && !(/^[A-Za-z]+$/).test(name)) {
alert("Name must be in character only.");
return false;
}
else{
alert("ok");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name"><input type="submit" id="submit">

var name = document.emp.new_name.value;
if (name.value.search(/[^a-zA-Z]+/) === -1) {
alert("Name must be in character only.");
return false;
}
Try with this code. Hopefully, this will work.

JavaScript Irish Mobile Regex

I'm trying to validate a form to check among other things that a user has added a valid Irish mobile which should start with 083,085,086,087,089 and be ten digits in length
I looked at Validate an Irish mobile phone number but I can't get it to work
My check function
function CheckPhone(pNumb) {
var paswd=/08[3679]-\d{0,10}$/;
return paswd.test(pNumb);}
Where I try to validate
if(!CheckPhone(d))
{
alert("You have not entered a valid Irish mobile number");
document.getElementById('phoneNumber').focus();
return false;
}
But even with a valid number I'm told that the entry is invalid. I'm sure I've done something wrong but I'm new to regex and not a programmer so not sure what.
In response to Jayce444 I've edited my question to include the full script as when I add the checkphone function it causes the email and password functions to be ignored and the form is submitted with invalid values present for these fields such as test#test and p2 for the password
<script>
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function CheckPassword(inputtxt) {
var paswd=/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}$/;
return paswd.test(inputtxt);
}
function CheckPhone(pNumb) {
var paswd=08[3679]-\d{7}$;
return paswd.test(pNumb);
}
function validateForm() {
var a=document.forms["subForm"]["firstName"].value;
if (a===null || a==="")
{
alert("All fields in the form are required You must enter your first name");
document.getElementById('firstName').focus();
return false;
}
var b=document.forms["subForm"]["lastName"].value;
if (b===null || b==="")
{
alert("All fields in the form are required You must enter your last name");
document.getElementById('lastName').focus();
return false;
}
var c=document.forms["subForm"]["email"].value;
if (c===null || c==="")
{
alert("All fields in the form are required You must enter your email address");
document.getElementById('email').focus();
return false;
}
if(validateEmail(c)===false)
{
alert("You must enter a valid email address");
document.getElementById('email').focus();
return false;
}
var d=document.forms["subForm"]["phoneNumber"].value;
if (d===null || d==="")
{
alert("All fields in the form are required You must enter your phone number");
document.getElementById('phoneNumber').focus();
return false;
}
if(CheckPhone(d)===false)
{
alert("You have not entered a valid Irish mobile number");
document.getElementById('phoneNumber').focus();
return false;
}
var e=document.forms["subForm"]["password"].value;
if (e===null || e==="")
{
alert("All fields in the form are required You must enter a password");
document.getElementById('password').focus();
return false;
}
if(CheckPassword(e)===false)
{
alert("You have not entered a valid password");
document.getElementById('password').focus();
return false;
}
}
</script>

This regex works:
08[3679]-\d{7}$
Btw this site: https://regex101.com/ is good to help test regexes and see what they're actually doing. The second part of yours, \d{0,10} says "match 0 to 10 digits". What you want is to match exactly 7 digits after the dash.

JS Numeric and Hyphen validation

I am using Javascript to validate phone number with hyphen. It is validating only one hyphen but not allowing two hyphens.
I want to validate this format:
123-456-7891
How can I do this with JS?
This is my function
function numericValidation(phoneno) {
var numbers = /^\d+((;\d+)*|-\d+)?$/;
if (phoneno.match(numbers)) {
alert('Your input is valid');
return true;
} else {
alert('Please enter in (123-456-7891) format');
return false;
}
}

function numericValidation(phoneno) {
var numbers =/^\d+(-\d+)*$/;
if (phoneno.match(numbers)) {
alert('Your input is valid');
return true;
}
else {
alert('Please enter in (123-456-7891) format');
return false;
}
}

javascript client side validation loop

umm.. i would like to show users what they need to fill up if they did not fill their name, email or message.. example, they filled up their name but they did not filled up their email and message so an error will be display that they should fill up their email and message. my code here shows all errors even if they filled up their name.
function validate() {
var myName = document.getElementById("inputName");
var myEmail = document.getElementById("inputEmail");
var filter = /^[_a-z0-9]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
var myMessage = document.getElementById("inputMessage");
var isValid = true;
if(myName.value == "") {
var myNameError = document.getElementById("inputNameError");
myNameError.innerHTML = "Please provide your name.";
isValid = false;
}
if (!filter.test(myEmail.value)) {
var myEmailError = document.getElementById("inputEmailError");
myEmailError.innerHTML="Please provide your email.";
isValid = false;
}
if(myMessage.value == "") {
var myMessageError = document.getElementById("inputMessageError");
myMessageError.innerHTML = "Please provide your message.";
isValid = false;
}
return isValid;
}

You could give jQuery validation a try: http://jqueryvalidation.org/documentation/
It will relieve you of many validation headaches...

If my understanding of your question is correct. The following is your scenario:
First time you don't give value for any field, all errors are shown.
Second you give input for name field and expect name error do disappear, but still it is shown.
The reason is because you have 1 error division per input field (3 in total) and they are not hidden when the input is present. You could modify your code as below:
function validate() {
var myName = document.getElementById("inputName");
var myEmail = document.getElementById("inputEmail");
var filter = /^[_a-z0-9]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
var myMessage = document.getElementById("inputMessage");
var isValid = true;
var myNameError = document.getElementById("inputNameError");
var myEmailError = document.getElementById("inputEmailError");
var myMessageError = document.getElementById("inputMessageError");
//Initially hide all previous error messages.
myNameError.className="hidden";
myEmailError.className="hidden";
myMessageError.className="hidden";
if(myName.value == "") {
myNameError.className="visible";//make error message div visible only on error.
myNameError.innerHTML = "Please provide your name.";
isValid = false;
}
if (!filter.test(myEmail.value)) {
myEmailError.className="visible";//make error message div visible only on error.
myEmailError.innerHTML="Please provide your email.";
isValid = false;
}
if(myMessage.value == "") {
myMessageError.className="visible";//make error message div visible only on error.
myMessageError.innerHTML = "Please provide your message.";
isValid = false;
}
return isValid;
}
CSS
.hidden {display: none;}
.visible {display: block;}
EDIT Adding fiddle link based on comments.