Validation form

Question

I want to check in javascript if the forms are empty or not , with simple programing like making all in one function it work but in oop, i want to use oop for this(for learning) it donsen't work why?

<script type="text/javascript">

function Contact()
{
    this.first_name=document.getElementById('first_name').value;
    this.last_name=document.getElementById('last_name').value;
    this.email_adre=document.getElementById('email_adre').value;
    this.message=document.getElementById('message').value;


    function checked()
    {   
        if ((this.first_name == "")||(this.last_name == "")||(this.email_adre == "") || (this.message == ""))
            {
                alert('please write all the forms');
                return false;
            }
        else 
            return true;
    }
}

var inc = new Contact();
</script>

And this is my form.

<form action="submited.html" method="POST" id="contact_form" onsubmit=" return inc.checked();">

    <label for='FirstName'>First Name: </label>
    <input type="text" name="firstname" id="first_name" maxlength="40">
    <br>
    <br>
    <label for='LastName'>Last Name: </label>
    <input type="text" name="lastname" id="last_name" maxlength="40">
    <br>
    <br>
    <label for='EMail'>Email adre:</label> 
    <input type="email" name="email" id="email_adre" maxlength="80">
    <br>
    <br>
    <label for='Message'>Message:</label>
    <br>  
    <textarea name="message" rows="10" cols="30" maxlength="200" wrap="hard" id="message"></textarea>
    <br><br><br>

    <input type="submit" value="Submit" class="submit"> <input type="reset" value="Reset" class="reset">

</form>

What is the error? And you can explain other ways of compiling the javascript code other that the browser to test the syntax or other errors? And you can give me a link with all the function/doom/documentation about oop and all you can do in javascript?Thanks in advance.

Answer 1

You have at least two problems:

1. You collect data from the form when the script is loaded, not when the form is submitted
2. You never assign checked to a property of the object

A fixed version would be something like:

function checked() {
    if ((this.first_name == "") || (this.last_name == "") || (this.email_adre == "") || (this.message == "")) {
        alert('please write all the forms');
        return false;
    } else {
        return true;
    }
}

function Contact() {
    this.first_name = document.getElementById('first_name').value;
    this.last_name = document.getElementById('last_name').value;
    this.email_adre = document.getElementById('email_adre').value;
    this.message = document.getElementById('message').value;    
}

Contact.prototype.checked = checked;

function bind_event_handlers(evt) {
    function check_form(evt) {
        var inc = new Contact();
        if (!inc.checked()) {
            evt.preventDefault();
        }
    }
    document.querySelector('form').addEventListener('submit', check_form);
}

addEventListener("load", bind_event_handlers);

Note that addEventListener replaces the onsubmit attribute.