Validate 5 required fields out of six fields in form

JavaScript
1

The problem is that I already have an id for each label. Can I have two? So I make one to be requiredField? That would be my solution.


<!DOCTYPE html>
<html lang="eng">
<head>
    <meta charset="utf-8">
    <link href="contactform.css" rel="stylesheet">
    <script src="contactform.js"></script>
    <title>Contact Form</title>
</head>

<body>
<h1>Contact Form</h1>
    <!-- Turn HTML5 validation off to test Javascript data validation -->
    <form id="contactform" action="#" method="post" novalidate>
        <p><i>Please complete the form. Mandatory fields are marked with a </i><em>*</em></p>
        <!-- Patient's name -->
        <fieldset>
            <legend>Patient's Name</legend>
            <p><label for="name">First Name <em>*</em></label>
                <input id="name" required>
                <span id = "errorName" class="errorMessage"></span></p>
            <p><label for="surname">Last Name <em>*</em></label>
                <input id="surname" required>
                <span id = "errorSurname" class="errorMessage"></span></p>
            <p><label for="title">Title <em>*</em></label>
                <select id="title"  required>
                <option value="">Please select</option>
                <option value="mr">Mr.</option>
                <option value="ms">Ms.</option>
                <option value="mrs">Mrs.</option>
                <option value="miss">Miss.</option>
                <option value="master">Master.</option>
                </select><br>
                <span id = "errorTitle" class="errorMessage"></span></p>
        </fieldset>
        <!-- Contact details -->
        <fieldset>
            <legend>Contact Details</legend>
            <p><label for="telephone">Telephone</label>
                <input id="telephone">
                <span id = "errorTelephone" class="errorMessage"></span></p>
            <p><label for="email">Email <em>*</em></label>
                <input id="email" type="email" required>
                <span id = "errorEmail" class="errorMessage"></span></p>
        <!-- Health Number -->
        <fieldset>
            <legend>Health Information</legend>
            <p><label for="healthNumber">Health Authority Number <em>*</em></label>
                <input id="healthNumber" type="alphanumeric" min="0" max="120" step="0.1" required>
                <span id = "errorHealthNumber" class="errorMessage"></span></p>
        </fieldset>
        <p><input type="submit" value="Submit" id=submit></p>
    </form>
</body>
</html>

And the JS is here:


function main(){
    document.getElementById("email").onblur = validateEmail;
    document.getElementById("healthNumber").onblur = validateHealthNumber;
    document.getElementById("name").onblur = validateRequiredFields;
}

function validateRequiredFields(){
    var

}

function validateEmail(){
    var emailRegEx = /^[\\w\\+\\.\\-]+@[\\w\\.\\-]+$/;
    if (emailRegEx.test(email.value) != true) {
        var errorEmail = document.getElementById("errorEmail");
        errorEmail.innerHTML = "* Please write a valid email.";
        return false;
    } else {
    return true;
    }
}


function validateHealthNumber(){
    var zhaNumberRegEx = /^[A-Z]{3}\\d{6}/;
    if (zhaNumberRegEx.test(healthNumber.value) != true) {
        var errorHealthNumber = document.getElementById("errorHealthNumber");
        errorHealthNumber.innerHTML = "* Please write a valid health ID.";
        return false;
    } else {
    return true;
    }
}

window.onload = main;

I hope I don’t have to check one by one…

Here’s the demo: http://jsfiddle.net/Assembly21/LL8qa/12/

Thanks in advance.

2

I also want to add this function, but don’t know how:


function showJsPlaceholder() {
    var placeholderField = document.getElementById("healthNumber");    
    var hint = "ZHA123456.";
 
    placeholderField.value = hint;
    placeholderField.style.color = "#A8A8A8";
    placeholderField.style.fontStyle = "italic";
 
    placeholderField.onfocus = function() {
    if (this.value == hint) {
    this.value = "";
    this.style.color = "#000";
    this.style.fontStyle = "normal";
    }
 }
 
 placeholderField.onblur = function() {
  if (this.value == "") {
    this.value = defaultText;
    this.style.color = "#A8A8A8";
	this.style.fontStyle = "italic";
  }
 }
}
3

I’m sorry, but your questions are now becoming unclear, and you’re over-asking. Also, your script block still contains a basic error that you could have easily debugged yourself:


function validateRequiredFields()  {     
    var       // this throws an error, and blocks the rest of the scripts from being executed 
}

In your other thread, I showed you how to debug yourself.

4

My question was very concrete: how do I select required fields when not all the fields are mandatory. Can I use id’s, classes? Could I select it with getAttribute and get the required from the HTML forms already there? I have different error messages to send out. I can do the rest. Writing code is easy. A technician can do this. This was more a question of how to design my function. Which is what good computer programmers do well as may be sometimes opposed to technicians. Is it not a question for a forum? Is the forum only for more advanced coders? Are people bother because one is learning? Yesterday you said you gave me a free one line lesson. It takes certain skills to be a good mentor. Respect and patience for example. And if someone doesnt’ learn is because of the teaching materials, not the student (sitepoint books can be improved). Simply Javascript jumps to very advanced kind of programming when designing forms for example. With no explanation. I think Sitepoint is on the right track, but they have to develop the teaching materials still.

5

What’s confusing is that even if I delete or neutralize the validateRequiredFieldsCOLOR=#009900[/COLOR], your code doesn’t have any validating functionality whatsoever – if I enter nothing and click ‘Submit’, nothing happens except the page returning to its top position. So you should really come up with a code that is basically functional, and then ask for additional or more specific functionality.

One question I can already answer, and that is that you can have as many IDs as you like, as long as they are all different. You cannot have multiple identical IDs.

But then, this thought doesn’t make much sense to me: “Can I have two? So I make one to be requiredField?”. Required or not is set by either the native HTML5 functions, by Javascript or by server-side scripting (and you should choose one of the latter two, because the first is not supported by older browsers). In principle, that is independent of the ID matter.

Regarding Sitepoint not offering the right tutorials for beginners, I would agree with that. But it is primarily a forum. Also, it seems to me that you dove off the deep end, and are now asking for help so as not to drown. That we do the entire debugging or code completion for you. I could imagine wiser strategies, such as starting with a simple internet search for form validation tutorial or ‘how to’.