CODEWITHSUNDEEP
javascriptjqueryhtml
William Kinaan
William Kinaan

Reputation: 28799

javascript ensure input files not empty

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

Upvotes: 0

Views: 2079

Answers (4)

dku.rajkumar
dku.rajkumar

Reputation: 18568

  1. Since you are using jquery, it can be done much easily.

  2. And also you have not closed p tag properly.

  3. First you should prevent defauld functionality since it is on submit.

  4. 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/

Upvotes: 1

mgraph
mgraph

Reputation: 15338

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);
    }
}​

Upvotes: 1

Sagiv Ofek
Sagiv Ofek

Reputation: 25270

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.

Upvotes: 1

Chris Gessler
Chris Gessler

Reputation: 23113

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.

Upvotes: 0

Related Questions