How to check inputs in
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?

Buddha · Answer 1 · 2014-01-14T02:20:13.000

0

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

edited Jan 14 '14 at 02:20

answered Jan 14 '14 at 01:42

Buddha

4,339
2
27
51

Thanks for you answer. Not bad idea. But I have to use js. Its a task. – Sharikov Vladislav Jan 14 '14 at 01:48
Your second approach would work in that case. Another approach is to create a javascript function that will be called on submit which will verify if all the fields are given appropriately. – Buddha Jan 14 '14 at 01:50
Is it possible in js? I mean write function which will get variable number of parameters? – Sharikov Vladislav Jan 14 '14 at 01:53
`for(var i=0; i – Sharikov Vladislav Jan 14 '14 at 01:58
You don't have to always check for non-emptiness of a field. Each field may have different validation requirements. – Buddha Jan 14 '14 at 02:02
Ok. Is there any method to get all childrens of ? – Sharikov Vladislav Jan 14 '14 at 02:05
Nope. As you know which fields are there in the form it is always a good idea to read each field separately and validate it. – Buddha Jan 14 '14 at 02:08
Unless you have a extreme liking to looping, I wouldn't suggest you do it that way, get each element by id and verify its contents. If you want to do looping logic, you can certainly get by using dom. Check this question for details. http://stackoverflow.com/questions/10381296/best-way-to-get-child-nodes – Buddha Jan 14 '14 at 02:21
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/45158/discussion-between-sharikov-vladislav-and-buddha) – Sharikov Vladislav Jan 14 '14 at 02:32
Apologies, I didn't see the chat room creation so far. Are you still there? Seems you left the chat room bythe time I respond over there. Hence pasting it here as comment. It is not that I don't like loops or anything. It is just that, in real world you hardly come across where all fields have same validation logic. If this is just practice, you can go ahead and use this logic if this works for you. – Buddha Jan 14 '14 at 04:19
I am trying now to assing this function to all forms. http://stackoverflow.com/questions/21105789/checking-all-forms-on-site Look there if you still want help. – Sharikov Vladislav Jan 14 '14 at 04:22

Sterling Archer · Answer 2 · 2014-01-14T16:24:25.370

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.

How to check inputs in and send form correctly

2 Answers2

How to check inputs in
and send form correctly