Develop Reference

When there is an input box with validation in Angular, it requires two clicks to transfer control to radio button

I have an input box and a radio box. When I click on the input box and then click on the radio box, I suppose the control should transfer to the radio box immediately. Instead, the first time, it shows the error message and the second time, it transfers the control to the radio box.
You can find a plunker of the issue here: No transfer of control to the radio box except after the second click

Yes, that's because you're showing the error as a block, this shifting the radio button.
To image that, imagine that the error pops when the mouse button goes down, while the radio box is checked when the mouse button goes up.
It might be a split second, but it's enough for your user to be fooled.
I would recommend either displaying your error in another way / Findign another layout for your form, or just validate the form on submit.
To validate the form on submit, Use the second parameter of the FormBuilder.group call :
this.myForm = fb.group({...}, { updateOn: 'submit' });
Here is an example of a working form, because the error is blurred out instead of removed (hidden vs style.opacity) : https://next.plnkr.co/edit/QEEviTpocGJ7QHus?open=lib%2Fapp.ts&deferRun=1

Add a character count near a TextField in a SilverStripe Form

I want to add a character count to a TextField in a SilverStripe 2.4 Form.
When ever a user enters data in the TextField I want to show a message right beside or underneath the field displaying how many characters are left.
I have a JavaScript and Ajax call to count and post the character count, but if I try to display it by using by using LiteralField going to another <div> which is not my option, any other HTML tags going out of Form.
Note: SilverStripe creates a separate div for each Field in the Form, because of that I am not able to show any thing to the right of that field or the bottom of it.

You can use this Jquery code :
$(".TextField").onchange(function(event)
{
$(event.target).closest(".silverstripe2.4 TextFiled").textContent = $(event.target).val().length;
}

validating and focusing an element

I want to validate an ASP.TextBox for entering only Integer Value with javascript function. In case of non-Integer value entered by a user, it should displays a warning message and keeps the focus on current element. I used the following procedure:
On Web Page’s Asp.TextBox element:
onchange="return isInteger(this);" onblur="return isInteger(this);"
And valdating function in functions.js file
function isInteger(mobj) {
var mval = mobj.value;
if (isNaN(parseInt(mval))) {
alert("Plese Enter a Valid Integer...!");
mobj.focus();
return false;
}
return true;
}
Is it correct, or is there any correct way to do the validation. Kindly suggest.

Yes idea is correct. Thats how you have to validate your textbox.
Validating a text box value using javascript
http://social.msdn.microsoft.com/Forums/en-US/netfxjscript/thread/07a91c1d-34db-44d8-9bd6-a424394a7028/
Or there is another way using onKeyUp() on text box, check the value of textbox, and return false if input is not an integer.

You can use ASP.NET RegularExpressionValidator Control for validating your text box input value.
Eg.
<asp:TextBox id="textbox1" runat="server" />
<asp:RegularExpressionValidator
ControlToValidate="textbox1"
ValidationExpression="\d{1,10}"
ErrorMessage="Plese Enter a Valid Integer...!"
runat="server" />

The idea is correct but onchange is enough. onblur is not necessary because you don't want to validate each time the control lost focus(i.e. tab through or just click) without having any change.

onblur is enough for validation here..
Using onchange and onblur together will create two alerts sometimes i.e when focus is lost and onchange fires together...
Try here...
If you use onchange alone, you will get alert only first time you lose the focus when you keep text unchanged ..like here... or else your have to clear textbox value if it is invalid...
onkeyup can be a best alternative but still you may need to clear textbox value like here...

How to correct validate based on choice of radio button?

I have a validation scenario where I have two radio buttons. I then Have two input text fields.
If the first radio button is selected the user only has to enter data in the first field. If the second radio button is select the user has to enter data in the first field and a date in the second field.
Now the first radio button is selected by default when the page loads. If the user does not enter anything in the first field with either button selected then there is a validation error that occurs onsubmit.
Now if the second radio button is selected and the user enters data in the first field and does not enter the date in the second field then the validation error occurs.
The problem I am having is that when the first button is selected if the user enters data in the first field but does not enter a date in the second field a validation error is occurring. This should not happen. The only way a validation error should occur if the first button is selected is if incorrect data is entered into the first field or if no data is entered into the first field. The user is not required to enter a date in the second field. So how can I write the JavaScript to reflect these conditions?
Here is the link to jsfiddle:
http://jsfiddle.net/rnnzn/

That's a lot in fiddle, and it doesn't seem to work in there.
I think that you think radio inputs work differently than they do. Don't check the value of the name of the control, check if the particular radio is checked.
ex:
if(document.getElementById('myform').radioName[0].checked){
//validate based on first radio selection
}eles{
//validate based on second radio selection
}
The important part to remember is that radio's and checkboxes are arrays, they are not as easy to deal with as text and select inputs.

Clean and accesible Other option (Check box and text box)

When I have a set of either check boxes or radio buttons I often need to have an Other choice. This check box or radio button is very often accompanied by a text box where the user is supposed to fill out what this Other is.
How do you usually handle this set up? What kind of markup do you use? What do you require in your validation? Do you use java script for anything? For example:
How do you make the form accessible? Do you use and how do you use the label tag, for example.
Do you connect the check box and text box in any way with some javascript? For example, do you activate the text box when the check box is checked? Do you check or uncheck the check box automatically if the text box is filled out or cleared?
Do you let validation fail with error messages if the check box is checked but the text box is not filled out, or if the text box is filled out but the check box is not checked? Or do you just consider it not filled out and not checked?
Very unsure how to best deal with this issue, so any advice and examples are most welcome c",)

Typically when I have dynamic forms, I insert the input dynamically. That is, in the case of jQuery, I'll use .append('<input...') or some other similar function to actually insert the elements, and id it (or class it, depending), so that it can be easily .remove()-ed if the user decides they want to use another option instead. Validation is either handled via an onClick on an input button. If I'm feeling feisty, I'll go the AJAX route, and skip the <form> altogether.
I would definitely let the validation fail. They want "Other", and you want to know what "Other" is. If you don't care what Other is, then don't bother with the input box.
Edit: Might look something like this.
$('input[type="radio"]').click( function() {
if($(this).next().attr('name') != 'other' && $(this).attr('name') == 'other_input') {
$(this).after('<textarea name="other"></textarea>');
} else {
$('textarea[name="other"]').remove();
}
}
The click will react to any radio being clicked, and the if will make sure that it's only the "other" radio button that will react to the click, and that it will only react if there isn't already a textarea after it (so you don't get multiple textarea propogations).
On the processing side of things, you'll have to do a validation at first to see if other was checked, and to grab the input of the textarea if it was. You should probably use server-side validation for that.
Hope that gets you started.

I usually enclose my radio buttons in a label like this:
<label><input type=radio value=xyz name=stjames>Saint James</label>
this way the user can click on the text to trigger the button.
When deciding how to behave, I usually say to myself "what do you think the user expected when they did that..." and that often gives me the answer. So, upon click or Focus of the text box, turn on the radio that goes with it. This won't work if you've disabled the text box!
( ) US ( ) UK (*) Other [________________]
If the Other choice is a dangerous one (deleting data), though, I'd disable the text box until the user explicitly clicks Other. Then, the Radio drives the Text Box instead of the other way around. You want the user to have to go through another step in this case. It depends on the situation - think about what'll happen in each case.
I usually try to make it impossible or annoying for the user to do something 'wrong'. EG disable the OK button if something is inconsistent. Or, select the Other radio when the user types in text. If there's text in the text box but the radio buttons are set to something different, I'd usually just ignore the text. But if it's a serious/dangerous situation, you want to make sure the user's made up their mind; if you delete the text when the user chooses a different radio, that might piss them off but it might be appropriate if they should be careful.