Develop Reference

How to globally add a class to an input field on focus in angular

Say I have two components A-Component and B-Component.Both of these contains some form-fields.When a text field is focused I would like to add a css class to its parent. I know its possible to add a focus event for the text field or by using a directive.
<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">
But rather than using focus event or directive for every text fields, is there a possibility to write something globally for every component so that it effects all the input fields.

you can do this
<div class="parentDiv" ng-class="{'classOnFocus': focusClass}">
<input name="date" type="text" ng-focus="focusClass = true" ng-blur="focusClass = false">
</div>
Similar thing you can do on all fields

You can write css class in style.css file.style.css file applied global style for angular app

HTML Form Elements VS Input Element Types

HTML has 13 form elements and the input element has 23 different types. My question is what is the reasoning behind making a form element a type of input or its own element?
At first I thought maybe its because all input types are just variants on input type=text, but that doesn't make sense when you throw checkbox and radio into the mix. Perhaps they would be better as their own form elements?
<input type="checkbox" name="check" value="yes">
// Would become
<checkbox name="check" value="yes">
Another form element that doesn't make sense to me is textarea for two reasons.
According to How to change the Content of a with Javascript you can use element.value to both set and retrieve a textarea's contents. Yet textarea doesn't have the value attribute, at least its not shown in the DOM.
The way textareas behave when resetting a form is inconsistent with other form elements. All input elements will be reset to the value of their value attribute. But a textarea is reset to whatever its 'value' (quotes because it doesn't have a value attribute in the DOM) was set as when the page loaded.
Example 1 (consistent with input): If you click the reset button, both input and 'textarea' will be reset to their 'initial' values (Example use jQuery). JSFiddle
<form>
<input type="text" name="text" value="initial" />
<textarea>initial</textarea>
<button type="reset">Reset</button>
</form>
<script>
$('input, textarea').val('set by javascript');
</script>
Example 2 (inconsistent with input): You cannot use .attr('value') with textarea elements, which means the following example doesn't work. You have to use $('textarea').text() or $('textarea').html() in order to set the default value.
<form>
<input type="text" name="text" value="initial" />
<textarea>initial</textarea>
<button type="reset">Reset</button>
</form>
<script>
$('input, textarea').attr('value', 'set by javascript');
</script>
There are other things that don't make sense to me but I will only highlight these two in my question. I'm hoping someone can explain to me why HTML and Javascript treat form elements differently (specifically when its comes to getting, setting, and resetting their values), and why certain form elements have their own elements and why others are just types of the input element.

$_POST not working with required used in input tag

I have a form that works flawlessly until I add the required attribute to the input tag. Then the form doesn't post. I'm not sure where in the form the required attribute is breaking the $_POST function but once broken all required attributes have to be removed. Has anyone experienced this behavior?
The ONLY thing that comes to mind is I have about 17 <div> with display:none set. Using Javascript, when a selection is made from a drop-down <select> tag the JavaScript changes the display to display:block as each <div> has unique set of <input> and <select> tags based on the building type selected. All of this is inside the <form> </form> tags.
There's nothing special about the <input> tags. Only when I add the required attribute to the <input> tags inside a <div> does it have a problem.
A typical <input> tag looks like this:
<input name="total_meters" type="number" id="total_meters" tabindex="20" size="40" min="1" max="99999999999" value="2" />
The required attribute is going between <input and name.
I'm asking here before I code my own validation routines.

Use jQuery function to add attribute "required" to the require input tag or
Make multiple form tag and multiple summit button for each div tag and adding attribute "required" into input tag.

Is there a label in HTML

i'm coming from Java background, Is there a label in HTML, where I could using for example javascript update the value.
I mean by label here, something similar like text input, but not not possible to update it, and it looks non-updateable.

You said you wanted something similar to a text input, so... use one, then! Just disable it, like
<input type='text' disabled>
^It's MAGIC!
You don't want label literally in HTML, because it's in no way similar to a text input. Labels in HTML are used for things like putting text in front of radio buttons.
If you wanted something similar to a Java label, you would just use the p tag, unless it would be behind a text input or so, then you would use the label tag.

The obvious to create a label would be using <label>
<label for="coward">Förnamn</label> <!-- points to to input element with id coward -->
<input class="text-input" name="coward" type="text" id="coward" value="whatever" />
But I think you're looking for something to "store a value in a form" that shouldn't be editable. You could use a hidden text input for that.
<input type="hidden" name="hiddenField" value="whatever" />
You could use divs (and style it the way you want it), and then just fetch the html from that div.
Take a look at the other answers as well.
There's a lot of options. What do you actually want to do? It would be easier to give you an answer that suits your needs.

A label is a <label>...
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

You have a couple of options.
There is actually a <label> element, which is typically used for labeling the items in a form.
You could also do a text input (<input>) and set it to disabled:
<input disabled>
Or you could just use a simple paragraph element <p> and style it how you want.
Here is a JSFiddle with some examples: http://jsfiddle.net/QXP75/
However, you'd want to use something semantic, so knowing what the purpose is would allow a more specific message. Also, with CSS, you can make just about any element look like anything.

floating with jquery

I'm doing a validation in javascript and need to create a floating div for each field when submitting the form
I'm using blur to check the field, but do not know how to create a floating div
would be as in the diagram below
someone has an idea?
[field 1] [float error message]
[field 2] [float error message]
[field 3] [float error message]

Append the floating div after the field that was blur'd like so
$('input[type=text]').blur(function() {
// do your validation
if (error) {
$('<p>')
.text('Validation Error: '+error)
.css('float', 'left')
.insertAfter(this);
}
});
IMHO it's best to keep all styling in CSS. I would personally replace the ".css()" call with ".addClass()", then setup a style rule that floated the error messages. If this approach was used, and the fields were originally wrapped like this:
<div class="field">
<label>Name:</label>
<input type="text" name="name" placeholder...>
</div>
<div class="field">
<label>Email:</label>
<input type="text" name="email" placeholder...>
</div>
...
Then clearing the validation would be as simple as:
$(this).siblings('.validation-error').remove();

If you are asking for technique, then any in-line element after the field element will do the trick. Ex.
<input type="text" name="firstName"><span>show on error</span><br />
<input type="text" name="lastName"><span>show on error</span><br />
<input type="text" name="empId"><span>show on error</span><br />
make these errors hidden initially (through styles) and show/hide them by script on validation as,
if(err_cond_of_elem)
$(elem).next().show();
else
$(elem).next().hide();
Edit:
If your errors are dynamic then you can add them by .html() metod of JQuery
$(elem).next().html(custom_err_message).show();

Since you have not provided any markup or code, I'll provide a pattern for my response.
Here's how I would do this.
1.) Create your form with text inputs and error message in your markup. So the markup could be something like:
<form id="whatever">
<fieldset>
<input type="text" id="1" value=""/><div id="error1">text for error 1</div>
<input type="text" id="2" value=""/><div id="error2">text for error 2</div>
<input type="text" id="3" value=""/><div id="error3">text for error 3</div>
</fieldset>
..
..
</form>
2.) Create your css to float text inputs left. The error divs could be set as display:none, float:left; This would make sure error messages are hidden when page loads and float properly. Also, my philosophy is to let HTML do HTML and CSS do CSS and JS do JS. So rather than manipulating the dom with jquery, just place markup and content on your page and use css to handle initial visibility and positioning. No need to do that with js.
3.) Then, in your method to check input values on blur, if the validation detects an error, all you have to do is show the corresponding error with .show(). Then as the user works to correct the input and passes your validation check, set the corresponding error to .hide().