How to print error message under respective input field using javascript validation in php [closed]

How to print error message under respective input field if left empty and error message must be removed when filled, how to proceed further i have not used javascript for validation earlier.

script code

function validateForm() {
    var a = document.forms["student_reg"]["name"].value;
    if (a == null || a == "") {
        alert("Name must be filled out");
        return false;
    }
     var b = document.forms["student_reg"]["email"].value;
     if (b == null || b == "") {
        alert("Email must be filled out");
        return false;
    }
     var c = document.forms["student_reg"]["username"].value;
     if (c == null || c == "") {
        alert("Username must be filled out");
        return false;
    }
     var d = document.forms["student_reg"]["password"].value;
     if (d == null || d == "") {
        alert("Password must be filled out");
        return false;
    }
     var e = document.forms["student_reg"]["roll_no"].value;
     if (e == null || e == "") {
        alert("Roll no must be filled out");
        return false;
    }
}

JavaScript
​x
 
function validateForm() {    var a = document.forms["student_reg"]["name"].value;    if (a == null || a == "") {        alert("Name must be filled out");        return false;    }     var b = document.forms["student_reg"]["email"].value;     if (b == null || b == "") {        alert("Email must be filled out");        return false;    }     var c = document.forms["student_reg"]["username"].value;     if (c == null || c == "") {        alert("Username must be filled out");        return false;    }     var d = document.forms["student_reg"]["password"].value;     if (d == null || d == "") {        alert("Password must be filled out");        return false;    }     var e = document.forms["student_reg"]["roll_no"].value;     if (e == null || e == "") {        alert("Roll no must be filled out");        return false;    }}​

html code is here

<body>

 <a href="login.php">Login</a>
        <form name="student_reg" method="POST" action="" onsubmit="return validateForm()">
                <p>NAME:</p>
                <input type="text" name="name" value="" >
                <span class="error"><p id="name_error"></p></span

                <p>EMAIL:</p>
                <input type="text" name="email" value="" >
                <span class="error"><p id="email_error"></p></span

                <p>USERNAME:</p>
                <input type="text" name="username" value="" >
                <span class="error"><p id="username_error"></p></span

                <p>PASSWORD:</p>
                <input type="password" name="password" value="" >
                <span class="error"><p id="password_error"></p></span

                <p>ROLL NO:</p>
                <input type="number" name="roll_no" value="" >
                <span class="error"><p id="roll_no_error"></p></span
                <br/>
                <br/>
                <br/>

                <input type="submit" name="submit" value="submit">

 </form>
 </body>

JavaScript
 
<body>​ <a href="login.php">Login</a>        <form name="student_reg" method="POST" action="" onsubmit="return validateForm()">                <p>NAME:</p>                <input type="text" name="name" value="" >                <span class="error"><p id="name_error"></p></span​                <p>EMAIL:</p>                <input type="text" name="email" value="" >                <span class="error"><p id="email_error"></p></span​                <p>USERNAME:</p>                <input type="text" name="username" value="" >                <span class="error"><p id="username_error"></p></span​                <p>PASSWORD:</p>                <input type="password" name="password" value="" >                <span class="error"><p id="password_error"></p></span​                <p>ROLL NO:</p>                <input type="number" name="roll_no" value="" >                <span class="error"><p id="roll_no_error"></p></span                <br/>                <br/>                <br/>​                <input type="submit" name="submit" value="submit">​ </form> </body>​

Answer

You can try this code:

It will check errors and returns at last after displaying all error messages if any.

function validateForm() {
    var error = 0;
    var a = document.forms["student_reg"]["name"].value;
    document.getElementById('name_error').innerHTML = '';
    if (a == null || a == "") {
        // alert("Name must be filled out");
        error++;
        document.getElementById('name_error').innerHTML = 'Name must be filled out';
    }

    var b = document.forms["student_reg"]["email"].value;
    document.getElementById('email_error').innerHTML = '';
    if (b == null || b == "") {
        // alert("Email must be filled out");
        error++;
        document.getElementById('email_error').innerHTML = 'Email must be filled out';
    }

    var c = document.forms["student_reg"]["username"].value;
    document.getElementById('username_error').innerHTML = '';
    if (c == null || c == "") {
        // alert("Username must be filled out");
        error++;
        document.getElementById('username_error').innerHTML = 'Username must be filled out';
    }

    var d = document.forms["student_reg"]["password"].value;
    document.getElementById('password_error').innerHTML = '';
    if (d == null || d == "") {
        // alert("Password must be filled out");
        error++;
        document.getElementById('password_error').innerHTML = 'Password must be filled out';
    }

    var e = document.forms["student_reg"]["roll_no"].value;
    document.getElementById('roll_no_error').innerHTML = '';
    if (e == null || e == "") {
        // alert("Roll no must be filled out");
        error++;
        document.getElementById('roll_no_error').innerHTML = 'Roll no must be filled out';
    }

    if(error>0) {
        return false;
    }
    return true;
}

JavaScript
 
function validateForm() {    var error = 0;    var a = document.forms["student_reg"]["name"].value;    document.getElementById('name_error').innerHTML = '';    if (a == null || a == "") {        // alert("Name must be filled out");        error++;        document.getElementById('name_error').innerHTML = 'Name must be filled out';    }​    var b = document.forms["student_reg"]["email"].value;    document.getElementById('email_error').innerHTML = '';    if (b == null || b == "") {        // alert("Email must be filled out");        error++;        document.getElementById('email_error').innerHTML = 'Email must be filled out';    }​    var c = document.forms["student_reg"]["username"].value;    document.getElementById('username_error').innerHTML = '';    if (c == null || c == "") {        // alert("Username must be filled out");        error++;        document.getElementById('username_error').innerHTML = 'Username must be filled out';    }​    var d = document.forms["student_reg"]["password"].value;    document.getElementById('password_error').innerHTML = '';    if (d == null || d == "") {        // alert("Password must be filled out");        error++;        document.getElementById('password_error').innerHTML = 'Password must be filled out';    }​    var e = document.forms["student_reg"]["roll_no"].value;    document.getElementById('roll_no_error').innerHTML = '';    if (e == null || e == "") {        // alert("Roll no must be filled out");        error++;        document.getElementById('roll_no_error').innerHTML = 'Roll no must be filled out';    }​    if(error>0) {        return false;    }    return true;}​

Advertisement

Answer