Here you are:-
Code:
<form id = "myform">
Enter your name:- <input type = "text" name = "fname" id = "fname" onblur = "validateForm()"><span id = "uname"></span>
<br>
</form>
<script type = "text/javascript">
function validateForm() {
document.getElementById('uname').innerHTML=""; // reset the field
var x = document.getElementById("fname").value;
x = x.replace(/^\s+|\s+$/g,""); // strip leading and trailing spaces
x = x.replace(/[^a-z\s\-\']/gi,"") // strip inpappropriate characters
x = x.toLowerCase().replace(/\b[a-z]/g,function(w){return w.toUpperCase()});
document.getElementById("fname").value = x; // write it back to the field
if (x.length < 2) {
document.getElementById('uname').innerHTML= " Please enter your name!";
document.getElementById('fname').focus();
return false;
}
else {
document.getElementById("uname").innerHTML= " Welcome " +x;
}
}
</script>
A submit button does what it says - submits a form to a server-side script specified in the form action. If no action is specified the form submits to itself, which in effect reloads the page. Adding another return false will stop the form from submitting - ever!!