Function Javascript Error Frame

Asked

Viewed 135 times

1

How I Seto an error frame in a Textbox through a javascript function?

javascript asp.net
  • 1

    What is an error frame? A red border to indicate that it has not validated?

  • That’s right, it’s like an edge to the Textbox where the user will be able to view the fields where information is missing or are with invalid information.

  • 1

    And it’s something handled by Asp (Webforms?). To put a simple edge on CSS is easy (border: 1px solid red)

  • Yes in CSS I was able to add, but the intention is an outline outside the Textbox with a small padding of 1px maybe

1 answer

1


Below is an example using javascript to change the CSS class of the element, after checking some error condition. Click here to view the example in JSFIDDLE.

In the example I use the events CHANGE and BLUR. The first is fired when some change happens in the field and the second is fired whenever the field loses focus.

HTML

<input id="foo" class="ok" type="text" onchange="verificaCampo()" onblur="verificaCampo()">
</input>

CSS

.ok {
}
.erro {
    border: 1px solid red;
}

JAVASCRIPT

function verificaCampo() {
    var foo = document.getElementById("foo");

    if (foo.value !== "entendi" ) { // adicione alguma cond de erro
        foo.className = "erro";
    } else {         
        // nao existem erros       
        foo.className = "ok";
    }
}

You can also use an event treatment that checks that the fields are correctly filled in at the time the customer tries to submit the form. This way the system is more responsive, since you don’t have to wait for the server to respond to know that there is something wrong with the form. But caring for, do not forget to test the data also on the server because there is no guarantee of the data that comes from the client (javascript may be disabled in the client, for example).

Browser other questions tagged javascript asp.net

You are not signed in. Login or sign up in order to post.