how to change border color of the Input field dynamically in jquery mobile
cordova-2.0.0, html, jquery-mobile
Solution
Implement this:
Working example: http://jsfiddle.net/Gajotres/PMrDn/53/
HTML:
<input class="validate[required,custom[onlyLetterSp]] text-input" id="first_name" name="firstName" type="text" placeholder="First Name" maxlength="10"/>
Javascript:
$('#first_name').parent().css('border-color','red');
Problem
I have an input-field in which I want to provide validation i am to change the placeholder text and its color but I also want to change the color of the input field border. here is the code of the html: ``` <input class="validate[required,custom[onlyLetterSp]] text-input" id="first_name" name="firstName" type="text" placeholder="First Name" maxlength="10" required> <input class="validate[required,custom[onlyLetterSp]] text-input" id="last_name" name="LastName" type="text" placeholder="Last Name" required> ``` here is the javascript code for validation and change placeholder color: ``` var defaultColor = 'BBBBBB'; var styleContent = 'input:-moz-placeholder {color: #' + defaultColor + ';} input::-webkit-input-placeholder {color: #' + defaultColor + ';}'; var styleBlock = '<style id="placeholder-style">' + styleContent + '</style>'; var randomColor='ff0000'; // generate new styles and append to the placeholder style block styleContent = 'input:-moz-placeholder {color: #' + randomColor + ';} input::-webkit-input-placeholder {color: #' + randomColor + ';}' var colorchng='<style id="placeholder-style">' + styleContent + '</style>'; if(first_name=="" || first_name=="First Name"){ $("#first_name").append(colorchng); $("#first_name").attr("placeholder","First Name can not be blank"); } if(last_name=="" || last_name=="Last Name"){ $("#last_name").append(colorchng); $("#last_name").attr("placeholder","Last Name can not be blank"); }else{ alert("Data Entered"); } ```