dalecosp;10996289 wrote:
Hmm, I'll need to cogitate on that for a while. For example, how would I select which DOM objects to assign values to?
The same way you'd know which elements to assign those values to if you did it directly in HTML. This is after all a design/interface decision.
Thus, it's simply a process of implementing this
/*
* This is simply a simply function that applies values to the specified attribute
* of the element with the given id. See below for parameter data to this function.
* The function is assigned to var assignAttributeValues so that it can be used
* in more than one place without having to retype it every time.
*
* Since I don't really know jQuery, it's entirely possible that such a function exists,
* and in that case you can simply remove this one and replace its usage with the
* jQuery version.
*/
var assignAttributeValues = function(data)
{
for (id in data)
{
$(id).attr(data[id].name, data[id].value);
}
}
/*
* This specifies that the element's #fname and #lname should have an attribute
* "nonempty" with the values "You must provide...".
*/
var formData = {
'#fname': {name: 'nonempty', value: 'You must provide a First Name'},
'#lname': {name: 'nonempty', value: 'You must provide a Last Name'}
}
/*
* Simple function to demonstrate the testing of elements with attribute
* "nonempty" and value == "".
* For such elements, it will show an alert with the value of the attribute "nonempty".
*
* This is obviously the function to replace with your previous form validator.
*/
function checkElements(f)
{
var postForm = true;
$(f).find('input[type="text"]').each(function(index) {
/*
* Using jQuery $() selector style to wrap the DOM element this in a jQuery
* object.
*/
if ($(this).attr('nonempty') != undefined && $(this).attr('value') == '')
{
alert($(this).attr('nonempty'));
postForm = false;
}
/*
* Or the same thing by directly using the DOM element. No idea
* if this would be cross-browser or not. For example,
* some browsers may not return null but rather undefined etc.
* You'd have to check it out yourself.
*/
if (this.getAttribute('nonempty') != null && this.value == '')
{
alert(this.getAttribute('nonempty'));
postForm = false;
}
})
return postForm;
}
<body>
<form onsubmit="return checkElements(this);" action="a_test.php;" method="POST">
<div>
<input type="text" id="fname" name="fname" value="" /><br/>
<input type="text" id="lname" name="lname" value="" /><br/>
<input type="text" id="bdate" name="bdate" value="" /><br/>
</div>
<div>
<input type="submit" name="submit" value="submit" />
</div><br/>
</form>
<script type="text/javascript">
$('form').ready(assignAttributeValues(formData));
</script>
</body>
dalecosp;10996289 wrote:
It does seem to, and the text is pretty appropriate ... if you mouse over the "name" field, you see "Please input your full name", a valid user instruction, I think 🙂
Sounds like a good idea. My point was mainly to be aware of this and avoid texts like "You didn't input your first name". In the example above I went with a new attribute name though. I believe that if you go down that javascript road, you should stay away from attributes meant to do other things. Well, possibly excepting title 🙂
dalecosp;10996289 wrote:
I do have an issue though; in IE7 or less, the JS refuses to submit even for form elements that don't have a "title" attribute set
Maybe you should try and modify it to work with jQuery instead. Like I specualed in one code comment above, it's possible that not all browsers will return the same value for getAttribute('title'). I'd at least start by inspecting this in IE7. Just add the second else block to see what IE7 returns. It might be undefined rather than null.
if ((s = e[i].getAttribute('title')) != null) {
if ((e[i].value == '')) {
feedback += s + '\n';
e[i].style.backgroundColor = '#F33';
}
else if (e[i].style) {
e[i].style.backgroundColor = '#FFF';
}
}
else
{
alert(e[i].getAttribute('title'));
}
