How to check inputs in <form> and send form correctly

Question

I have 2 questions:
How to check input better? I have idea:
First, make field near input.

<input type='text' name='firstname'><label id='firstnameError'></label>

Second, call js-function on input onBlur with id of input and id of this label.

<input type='text' name='firstname' id='firstname' onBlur='checkEmpty("firstname", "firstnameError");'><label id='firstnameError'></label>

And js-script:

function checkEmpty(fieldId, errorFieldId)
{
    var data = document.getElementById(fieldId).value;
    if (data == "") 
    {
        document.getElementById(errorFieldId).innerHTML="Error, input something!...";
    }
}

And I will just use this function on all inputs, right? Is it correct?

How to check all inputs in form correctly?
Sure I can set type=button and onSubmit call some function, which will check all elements in this form. ~ Same function like in first question, but with 5-7 if-blocks for each input. And yes for 10 forms, I will have to write 10 functions, etc. How better do it? Seems to me, I can only send form Id/name and get childs of element. Am I correct?

Maybe another way? I use jquery on my site anyway (some ajax). Maybe it is easier to do what I want on jquery? The problem is I am not too good in js, to use jquery easily. What do you think?

Answer 1

If you just want to verify if some data is provided or not, you can use required attribute.

<input type="text" name="username" required>

if you are using XHTML it should be as shown below..

<input type="text" name="username" required="required">

The required attribute is supported in Internet Explorer 10, Firefox, Opera, and Chrome and is not supported in Internet Explorer 9 and earlier versions, or in Safari.

In case if you want to use JavaScript. You can create a javascript function which will be called on submit of the form.

<form name="search" onsubmit="return validate()" >
   Name: <input type="text" name="name"/>
   Age: <input type="gender" name="sex"/>
   <input type="submit" name="Submit" value="Submit"/>
</form>

function validate(){
  // all the code for verification
  return false;  // if any of the step verification step fails. Otherwise return true.
}

Source: http://www.w3schools.com/tags/att_input_required.asp

Answer 2

To improve on your design, it's better to use non-inline JavaScript. Try using a design like this:

var fname = document.getElementById("firstname");
var other = document.getElementById("otherid");
fname.onblur = other.onblur = function() {
   checkEmpty(this.id,this.id+"Error");
}

This will give all your desired elements the same onclick function and eliminate those pesky onblur attributes.

Edit: make sure your variables are declared before you chain assignments like this, or you will yield unwanted global variables.