@Darrin:
Assuming the OP's 'errors' object only contains entries for fields
with errors (and not for fields that were okay), we'll need to be sure
to clear their 'error' elements to blank just in case they've been set
before.
@Ben:
Just FWIW, I'd shy away from using a dot (.) in your element IDs, so
old people like me don't mistake things for CSS selectors involving a
class name at first glance. :-)
I'd probably change things so that the error spans don't use dots in
their IDs, and do use a class (like, say, 'flderr' for "field
error"). E.g.:
<input type="text" name="firstName" id="firstName" value=""/>
<span id="err_firstName" class="flderr" />
Then I'd use element.select() on the containing form element to find
the error spans, loop through them, and set the message on each either
to blank or to the error:
function displayErrors(errors)
{
$('example').select('.flderr').each(function(span) {
// This ID check is just me being paranoid
if (span.id.substring(0, 4) == 'err_') {
span.innerHTML = errors[span.id.substring(4)] || '';
}
});
}
(Edge case: If there are errors for which there are no error spans,
the above won't show them anywhere.)
Alternately, there's probably a clever way to do this without giving
the error spans IDs at all using Element.previous, but for me that
starts getting awfully finicky about the structure of the HTML. I'd
stick to using IDs for robustness and simplicity.
FWIW,
--
T.J. Crowder
tj / crowder software / com
On Oct 10, 1:37 pm, darrinholst <[EMAIL PROTECTED]> wrote:
> How about something like
>
> $H(errors).each(function(pair) {
> $(pair.key + '.error').update(pair.value);
>
> });
>
> On Oct 10, 3:09 am, Ben Short <[EMAIL PROTECTED]> wrote:
>
> > Hi,
>
> > I have a simple page that submits a form via Ajax. If I leave both
> > fields blank i get the following response in JSON from the server.
>
> > {"errors":{"lastName":"Required","firstName":"Required"}}
>
> > I have coded the js to check for errors and then update the page based
> > on them.
>
> > What I would like to do is iterate over the errors returned rather
> > than have to hard code each error check. So i could use the lastName
> > and firstName from the JSON, then append '.error' and use the
> > firstName.error to lookup the span to then set the error message in.
>
> > Is this possible?
>
> > Below is my html page.
>
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> > "http://www.w3.org/TR/html4/loose.dtd";>
> > <html>
> > <head>
> > <title></title>
>
> > <script type="text/javascript" src="/js/prototype-1.6.0.3.js"></
> > script>
>
> > <script type="text/javascript">
>
> > function submitTheForm() {
>
> > // rest the errors
> > $('firstName.error').innerHTML='';
> > $('lastName.error').innerHTML=''
>
> > $('example').request({
> > requestHeaders: {Accept: 'application/json'},
> > onSuccess: function(transport){
> > var json = transport.responseText.evalJSON();
>
> > var errors = json.errors;
>
> > if ( errors.firstName != null ) {
> > $
> > ('firstName.error').innerHTML=errors.firstName;
> > }
>
> > if ( errors.lastName != null ) {
> > $
> > ('lastName.error').innerHTML=errors.lastName;
> > }
> > },
> > onComplete: function(){ alert('Form data
> > saved!')},
> > onFailure: function() { alert('Failed!')}
> > })
>
> > return false;
> > }
>
> > </script>
>
> > </head>
> > <body>
>
> > <form id="example" method="POST" action="/ws/simple" name="command">
> > <fieldset>
> > <legend>User info</legend>
> > <div><label for="firstname">First Name:</label>
> > <input type="text" name="firstName" id="firstName"
> > value=""/><span id="firstName.error" /></div>
>
> > <div><label for="lastname">Last Name:</label>
> > <input type="text" name="lastName" id="lastName" value="" /
>
> > ><span id="lastName.error" /></div>
>
> > <div class="buttonrow" ><input type="submit"
> > value="serialize!" onclick="return submitTheForm()"/></div>
> > </fieldset>
> > </form>
>
> > </body>
> > </html>
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
