We Keep Coding

Is there a way in JQuery to find if a sibling of an input has a given css class?

<span>
<input name="" autocomplete="off" label="" class="form-control mandatory field-mandatory" placeholder="">
<span class="goog-combobox-button"/>
<input type="hidden" value="3" id="ctl00_cntMainBody_OBJECT_ONE__PMLookupField" name="ctl00_cntMainBody_OBJECT_ONE__PMLookupField">
</span>
I would like to find out if there is a way, using jQuery, to find if the input above the one with id=ctl00_cntMainBody_OBJECT_ONE__PMLookupField has a css class field-mandatory. There are many spans on the page with similar to this one. I am working within the existing structure of html with no option to change. Since the input has no id the only way to locate it is by using the input below it that has an id.

Find each hidden input and target the sibling you want :-
$("input[type='hidden']").each(function() {
var inputAbove = $(this).siblings('input.field-mandatory');
// DO SOMETHING
});

How to apply styling on input tags individually?

I have a input list coming from modal window so these are selected names displaying in input field, Now i want to apply styling on names so it can display as separate names , I know i am using join(;) for separator between names but that's not enough.
How can i add styling that can be more readable for the users , like if i can apply background color to each of selected items that will be better.
main.html
<input type="text" class="form-control customReadOnly"
style="font-size: 20px; background-color:red"
id="prcsOwner" required ng-model="processOwnerObj.workerName"
name="prcsOwner" readonly="readonly"
placeholder="Process Owner" />
ctrl.js
$scope.processOwnerObj.workerName= $scope.selectedOwners.map(function (owner) { return owner.fullName; }).join(';');

You cannot user ng-model that way...
You might have to use $parsers and $formatters in a directive
See here and the docs...

Set focus to input before validator span

I am displaying an input field followed by a br tag and a span for a validation message. There are three of these for a login form. I want to locate the first field with a visible validation message (span has a class assigned) and set focus to the input associated with the span.
My html looks like thus:
<div id="loginForm">
<label class="formLabel" for="Login_LastName">Your last name</label>
<input id="Login_LastName" name="Login_LastName" type="text" maxlength="31" style="width:200px;" /><br />
<span id="Login_LastName_validator"></span>
. . .
</div>
I am trying to use the following javascript but it's not finding the input:
$("#loginPanel").find("validationMsg:first").prev("input").focus();
I can locate the validation span it appears as I can alert the contents:
alert($("#loginPanel").find(".validationMsg:first").html());
I just cannot seem to locate the input object to set focus.
I am setting the validationMsg via javascript:
if(!$.trim($("#Login_LastName").val())) {
$("#Login_LastName_validator").html("Your last name is required<br /><br />")
.addClass("validationMsg");
loginFormValid = false;
}
else {
$("#Login_LastName_validator").html("")
.removeClass("validationMsg");
}

Found a solution. I think I had to get it past the break tag. Looks like prev() only checks the one element previous? It does not keep going?
$("#loginPanel").find(".validationMsg:first").prev().prev("input").focus();

Check which field is not valid in form with Angular

I need to check which fields aren't valid after 5 seconds when form is rendered. I have a button and I set this ng-disabled="!step1Form.$valid" but I need to add some kind of CSS class maybe red to fields which are not valid, can any give me some help?
This is the field where I want to set the invalid pattern:
<div ng-form="logoForm" style="position:absolute;top:0px;left:0px;" class="info-picture main ng-pristine ng-invalid ng-invalid-required">
<div add-pic="" class="small-button">Agregar logo</div>
<input type="file" required="required" ng-model="logo.company" id="company_logo" style="display:none;" ng-file-select="" class="ng-pristine ng-invalid ng-invalid-required">
</div>

If you want to add css Class to any component you can use the "ng-class" directive.
You can see this in documentation at http://docs.angularjs.org/api/ng/directive/ngClass
Another question like yours is this: How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?

Replacing Radio Box with image (Javascript or Jquery)

I am currently overlaying a radio box on top of a unique image (found help here on stackoverflow: How can I display the checkbox over the images for selection? and http://jsfiddle.net/erSBP/1/) and it's working like the example.
However, I would like to remove the radio box so that only the unique image remains and is clickable and sends the checked value just as a normal radio button would.
The radio box input ID's are generated dynamically so I can't specify what they are named.
Is there any way to do this with Javascript or JQuery?
My current configuration is:
<div class="answer">
<div class="answer-image">
<img style="border-width:0px;" src="/images/white.jpg">
</div>
<input id="Questions8404" type="radio" onclick="javascript:setTimeout('__doPostBack(\'965968404\',\'\')', 0)" value="8404" name="96596">
</div>

Your code is messed up. Firstly, don;t use setimeout. Just call dopostback. Secondly, you're using a javascript url on an onlick attribute. Don't do that unless you calling it through the href attribute for who knows what reason. All in all, don't use javascript urls. Here's what your code should look like
<div class="answer">
<div class="answer-image">
<img style="border-width:0px;" src="/images/white.jpg">
</div>
<input id="Questions8404" type="radio" onclick="__doPostBack(\'965968404\',\'\')" value="8404" name="96596">
</div>

If you were looking to do this with a checkbox, you could do something like this with jquery​
$(document).ready(function () {
$(".answer").each(function() {
var p = $(this).find("input:checkbox");
p.hide();
$(this).find("img").click(function() {
p.prop("checked", true);
});
});
});
As this will set the input to hidden, and trigger a click event to select the checkbox. It will match the Image and the Input as contained in same "answer" div. You could adapt this to work with a radio, you would just need to know which option you wanted to select.