Input field become active if user leave it blank

[botpro7]

Hi guys, i have auto overflow div with a table and a button inside ,

There are a-h field that user must fill. Let say if user forgot to fill “b” field and click submit button, how to make the cursor automatically go to “b” field, marking that the field is active and need to be filled?

This is the [codepen](http://codepen.io/botpro7/pen/Iylxj “”). Please take a look.

Thanks in advanced guys.

[pixelgrid]

html5 required input attribute can get you going when it comes to required inputs.
Most modern browsers make it clear with a tooltip and styling witch has to be filled.

Another approach with javascript(jQuery) is this

var first = true;
$(‘button’).click(function(){
$(‘input[type=text]’).each(function(){
if($(this).val() == ”){
$(this).addClass(‘warning’);
$(this).attr(‘placeholder’,’This field must be filled’);
if(first){$(this).focus();first =false;}
}
});
});

adding to your css a class declaration for warning

.warning{
border:1px solid red;
box-shadow:0 0 5px red;
}

then you will have to check in the next submission if it has the message class and remove it if its filled

your code will not submit anywhere though as its not in a form

[DanielMortzen]

First of all you would have to name your inputs individually to be able to handle them at all. They can’t all be named “textfield”.

After that you would need javascript to validate the form once the user clicks submit, basically checking if the field is empty or not. Also don’t forget to validate it server-side as well, it’s quite easy to get around javascript validation.

I’d recommend using jQuery, and if you do there’s a number of good plugins that can help you with validation as well. For instance: http://docs.jquery.com/Plugins/Validation

[botpro7]

@ pixelgrid

i tried the code that you gave me in codepen, i chose jquery library, and it worked well,

but when i tried to a single HTML file it didn’t work, i use this CDN = src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”

the code are exactly the same, what is wrong? please help. Thanks
[Codepen](http://codepen.io/botpro7/pen/Iylxj “”)

@ DanielMortzen

thx for the clue.

[botpro7]

sori guys, it was my mistake, i forgot to put “http:” in front of the CDN URL :)

[botpro7]

hi pixelgrid or any other guy out there,

could you explain to me or give me the reference link the use of true and false value like the variable that u created (var first = true;)?

I’m trying to do something like [this](http://codepen.io/botpro7/pen/Iylxj “”)

When the first time user click the textfield, the second radio button is automatically checked, but after i clicked the first radio button, and then clicked the textfield again, the second radio button is not checked, i believe this is all because of that “true and false” value, isn’t it? Please help.

Thank you very much.

[Author]

Posts