javascript ensure input files not empty

Question

html code

<div id="signup">
    <form method="POST" action="#">
        <p>
            <label>Frist Name</label>
            <input type="text" id="sufName"/>
        <p>
        <p>
            <label>Last Name</label>
            <input type="text" id="sulName"/>
        <p>
        <p>
            <label>Email</label>
            <input type="text" id="suEmail"/>
        <p>
        <p>
            <label>Mobile Number</label>
            <input type="text" id="suMNumber"/>
        <p>
        <p>
            <label>Password</label>
            <input type="password" id="suPassword"/>
        <p>
        <p>
            <label>Re Password</label>
            <input type="password" id="suRePassword"/>
        <p>
        <p>
            <input type="submit" class="button" value="sign up" onclick="signup()"/>
        </p>
    </form>
</div>

and when i press the button sign up i want to ensure that no input files is empty and if any input field is empty i will add an error message left to that input filed

javascript code

function signup(){
    var inputs = document.getElementsByTagName('input');
    for(var i=0;i<inputs.length;i++){
        alert('d');
        isEmptyInput(inputs[0].id);
    }
}
function addErrorMessage(element){
    clearErrorMessage();
    var error = document.createElement('span');
    error.setAttribute('class', 'errorMessage');
    error.innerHTML="select coutry first";
    element.appendChild(error);
}
function clearErrorMessage(){
    var errors = document.getElementsByClassName('errorMessage');
    for(var i=0;i<errors.length;i++){
        var kk=errors[i].parentNode;
        kk.removeChild(errors[i]);
    }
}
function isEmptyInput(input){
    if(input.value===""){
        var parent = input.parentNode;
        addErrorMessage(parent);
    }
}

but doesn't work , even the function isEmptyInput doesn't work a jsfiddle copy code

dku.rajkumar · Accepted Answer · 2012-05-12 13:35:51Z

1

Since you are using jquery, it can be done much easily.
And also you have not closed p tag properly.
First you should prevent defauld functionality since it is on submit.
It not good to append on each call because the number of error span will be increasing on every submit.

Change the HTML like below and try jquery.

HTML:

<form method="POST" action="#">
    <p>
        <label>Frist Name</label>
        <input type="text" id="sufName"/>
        <span class="errorMessage"></span>
    </p>
    <p>
        <label>Last Name</label>
        <input type="text" id="sulName"/>
        <span class="errorMessage"></span>
    </p>
    <p>
        <label>Email</label>
        <input type="text" id="suEmail"/>
        <span class="errorMessage"></span>
    </p>
    <p>
        <label>Mobile Number</label>
        <input type="text" id="suMNumber"/>
         <span class="errorMessage"></span>
    </p>
    <p>
        <label>Password</label>
        <input type="password" id="suPassword"/>
        <span class="errorMessage"></span>
    </p>
    <p>
        <label>Re Password</label>
        <input type="password" id="suRePassword"/>
        <span class="errorMessage"></span>
    </p>
    <p>
        <input type="submit" class="button" value="sign up"/>
    </p>
</form>

** Jquery**

 $(document).ready(function(){
  $('form').on('submit', function(e){
   e.preventDefault();
   var errorCount = 0;
   $('span.errorMessage').text(''); // reset all error mesaage
   $('input').each(function(){
     var $this = $(this);
     if($this.val() === ''){
        var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label
        $this.next('span').text(error);
        errorCount = errorCount + 1;   
      }
  });
  if(errorCount === 0){
    $(this).submit(); // submit form if no error
  }
  });
 });

Fiddle : http://jsfiddle.net/h9njC/11/

edited May 12, 2012 at 13:35

answered May 12, 2012 at 13:14

dku.rajkumar

18.6k8 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

William Kinaan Over a year ago

it works on jsfiddle , but on my code doesn't work , i included jquery already , so y it doesn't work on my code ?

William Kinaan Over a year ago

yesterday was the same problem , on jsfiddle i had to change the js framework to jquery to work , but on my code how can i do that chagne ?

dku.rajkumar Over a year ago

did you try the latest answer ???? i have updated the answer to make it much better..

dku.rajkumar Over a year ago

if not.. include "ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" in script tag in head.

dku.rajkumar Over a year ago

are you wrapping the code within "$(document).ready(function(){" ???? I think that could be on pbm..

|

Sagiv Ofek · Accepted Answer · 2012-05-12 13:00:54Z

1

try that:

$("input[type=submit]").click(function () {
    var err = false;
    $(this).closest("form").find("input[type='text']").each(function () {
        if ($(this).val() == "") {
            addErrorMessage(this); //or any other error handling you like                
            err = true;
        }
    });
    return !err;        
});

i wrote a jquery plugin for form validation. check it out. hope it helps.

answered May 12, 2012 at 13:00

Sagiv Ofek

25.3k8 gold badges62 silver badges55 bronze badges

Comments

mgraph · Accepted Answer · 2012-05-12 13:05:01Z

1

demo : http://jsfiddle.net/h9njC/9/

HTML:

<form method="POST" action="#" onSubmit='return false;'>

js:

function signup(){
    var inputs = document.getElementsByTagName('input');
    clearErrorMessage();
    for(var i=0;i<inputs.length;i++){
        isEmptyInput(inputs[i]);
    }
    return false;
}
function addErrorMessage(element,field){
    var error = document.createElement('span');
    error.setAttribute('class', 'errorMessage');
    error.innerHTML = "select "+field+" first";
    element.appendChild(error);
}
function clearErrorMessage(){
    var errors = document.getElementsByClassName('errorMessage');
    for(var i=0;i<errors.length;i++){
        var kk=errors[i].parentNode;
        kk.removeChild(errors[i]);
    }
}
function isEmptyInput(input){
    if(input.value===""){
        var parent = input.parentNode;
        var field = parent.getElementsByTagName('label');
        addErrorMessage(parent,field[0].innerHTML);
    }
}

edited May 12, 2012 at 13:05

answered May 12, 2012 at 12:45

mgraph

15.3k4 gold badges43 silver badges76 bronze badges

4 Comments

William Kinaan Over a year ago

i want to send it to the function isEmptyInput cos that id i want to to print an error message , see code

William Kinaan Over a year ago

it works good , but is javascript accept function override ? i mean adderror(element) , adderror(elament,field) ?

mgraph Over a year ago

@WilliamKinaan i don't undertand, do you need to have adderror twice

William Kinaan Over a year ago

forget the override , it is something in java , but now i used ur code exaclty just edit the isemptyinput cos i don't want to send field.innerhtml , see the code jsfiddle.net/Wiliam_Kinaan/TztvN

Chris Gessler · Accepted Answer · 2012-05-12 12:47:43Z

0

Because you're using a submit button.

Either add your code to the form's OnSubmit() event and return false on validation failure, or change your button to a regular button type='button' and then call document.forms[0].submit() within your signup() method when validation suceeds.

answered May 12, 2012 at 12:47

Chris Gessler

23.2k8 gold badges59 silver badges86 bronze badges

2 Comments

William Kinaan Over a year ago

but the function signup works and i alter some test and it works

Chris Gessler Over a year ago

The problem is that you're using a SUBMIT button which will call the form's OnSubmit event AND you're executing the signup method. The OnSubmit event WILL submit the form regardless of the call to signup.

Collectives™ on Stack Overflow

javascript ensure input files not empty

html code

javascript code

4 Answers 4

9 Comments

Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

html code

javascript code

4 Answers 4

9 Comments

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related