Hey there! I've got a simple CRUD input form with Javascript validation. When an error occurs, the error message pops up below the input field in red text. I've tried various methods like floats and adjusting margins, but nothing seems to work.
The code is on a different computer, but basically, the JavaScript checks for a span value in the HTML. If it's not there, it creates the error message and sets its properties using CSS.
Here's a snippet of the HTML:
<label for="fName">First Name:</label>
<form:input type="text" name="fName" id="fName" path="fName"/>
<div id = "fName.errorField"><font color="red"><form:errors cssClass= "error" path="fName" /></font></div><br />
A piece of the JS:
if(document.getElementById('fName.errors') == null){
newSpan.id = "fname.errors";
newSpan.className = "error";
document.getElementById('fname.errorField').appendChild(newSpan);
newSpan = document.createElement("span");
}
function validateFName() {
var alphaChar = /^[a-zA-Z]+$/;
var nameFChek = document.input.fName.value;
if (nameFChek == ""){
document.getElementById("fName.errors").innerHTML = "This field is blank (fname)";
return false;
}
And here's my current CSS:
form { width: 800px;}
label { float: left; width: 150px;}
input[type=text] { float: left; width: 250px;}
.clear { clear:both; height: 0; line-height: 0;}
.floatright { float: right;}