title: how to change border color of the Input field dynamically in jquery mobile
body: <p>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:</p>
  
  <pre><code>&lt;input class="validate[required,custom[onlyLetterSp]] text-input" id="first_name" name="firstName" type="text" placeholder="First Name" maxlength="10" required&gt;
      &lt;input class="validate[required,custom[onlyLetterSp]] text-input" id="last_name" name="LastName" type="text" placeholder="Last Name" required&gt;
  </code></pre>
  
  <p>here is the javascript code for validation and change placeholder color:</p>
  
  <pre><code>var defaultColor = 'BBBBBB';
  var styleContent = 'input:-moz-placeholder {color: #' + defaultColor + ';} input::-webkit-input-placeholder {color: #' + defaultColor + ';}';
  var styleBlock = '&lt;style id="placeholder-style"&gt;' + styleContent + '&lt;/style&gt;';
  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='&lt;style id="placeholder-style"&gt;' + styleContent + '&lt;/style&gt;';
       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");
      }
  </code></pre>