Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by hailemariam kassahun
hailemariam kassahun
Courses Plus Student 36 Points

form validation

how to have a validation message in the box

1 Answer

jared eiseman
jared eiseman
29,023 Points
jared eiseman
jared eiseman
29,023 Points

Modified from a w3schools example of how to do this:

<!DOCTYPE html>
<html>
<body>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100" max="300">
<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 or greater than 300, an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("id1").value = "Invalid entry.";
    } else {
        document.getElementById("id1").value = "Input OK";
    } 
} 
</script>

</body>
</html>

The conditional statements can be modified to check whatever logic you'd like. Alternatively you can show/hide elements that are a little more stylized.

w3schools source: http://www.w3schools.com/js/js_validation_api.asp