CODEWITHSUNDEEP
javascriptcss
RamSP
RamSP

Reputation: 21

How do I highlight a textbox border color to red when textbox field remain empty?

In my email form when the email field is empty or incorrect the border color should change to red color,how this can be done with javascript?

the UI script

<tr>
    <td style="color:rgb(05,111,159);text-align:right;">
    <p style="color:rgb(05,111,159);font-size:large" class="col-sm2">
    Confirm Email:</p>
    </td> 

    <td>
    <asp:TextBox Height="28px" Width="260px"ID="ConfirmEmail"runat="server" 
    TextMode="Email"></asp:TextBox>
    <asp:RequiredFieldValidator ID="ConfirmEmailRequired" runat="server" 
    ControlToValidate="ConfirmEmail" Display="Dynamic"> 
    </asp:RequiredFieldValidator>
    </td>
</tr>

I would like to change the border color to red when the textbox field remain empty on button click.

Upvotes: 1

Views: 4318

Answers (4)

O.O
O.O

Reputation: 1419

This should work, using JQuery.

function inputVal() {
  var inputEmail = $("#ConfirmEmail");
  if (inputEmail[0].value === "" || inputEmail[0].value.length === 0) {
    inputEmail.css("border", "1px solid red");
  } else {
    inputEmail.css("border", "1px solid green");
  }
}

function addUser() {
  //Do something
  document.getElementById("CreateUserButton").innerHTML = "User Added!";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="inputVal()"> Check Input</button>
<Table>
  <tr>
    <td style="color:rgb(05,111,159);text-align:right;">
      <p style="color:rgb(05,111,159);font-size:large" class="col-sm-2">Confirm Email:</p>
    </td>
    <td>
  </tr>
  <tr>
    <td>
      <Input Height="28px" Width="260px" ID="ConfirmEmail" runat="server" TextMode="Email" placeholder="Write Here"></Input>
    </td>

    <td align="right" colspan="2">
      <Button ID="CreateUserButton" CssClass="col-sm-offset-2" font-size="Medium" font-family="Arial" Font-Bold="true" font-colour="Olive" Visible="false" runat="server" onclick="addUser()" CommandName="MoveNext">Create User Button</Button>
  </tr>
</Table>

Upvotes: 1

Udhay Titus
Udhay Titus

Reputation: 5869

  function validate(){
  var input = document.getElementById('ConfirmEmail');
    //if(input.value == ""){
    if(input.value.trim().length === 0){
      input.style.border = "1px solid red";
    }
    else if(validateEmail(input.value)==false){
       input.style.border = "1px solid red";
    }
    else{
      input.style.border = "1px solid black";
    }
  }
  
function validateEmail(mail) 
{
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail))
  {
    return (true)
  }
    return (false)
}
<td style="color:rgb(05,111,159);text-align:right;"><p style="color:rgb(05,111,159);font-size:large" class="col-sm-2">Confirm Email:</p></td>

        <td>
            <input type="textbox" Height="28px" Width="260px" ID="ConfirmEmail" runat="server" TextMode="Email"/>
            <asp:RequiredFieldValidator ID="ConfirmEmailRequired" runat="server" ControlToValidate="ConfirmEmail" Display="Dynamic"></asp:RequiredFieldValidator></td>
            
            <input type="button" id="Submit" value="Submit" onclick="validate()"/>

Upvotes: 1

Kokodoko
Kokodoko

Reputation: 28128

I think you can use 

#myfield:invalid { ... }

to apply a style if the input is invalid.

Upvotes: 0

Thanveer Shah
Thanveer Shah

Reputation: 3323

var confirmEmail = document.getElementById('ConfirmEmail').value;

if(confirmEmail.length == 0){
   confirmEmail.style.border = "1px solid red";
}else{
   confirmEmail.style.border = "1px solid black";
}

Hope this helps.

Upvotes: 2

Related Questions