Displaying Errors

[Blueie]

Hello

I have a contact form here: Link

If a user does not complete a field, a red text message appears onscreen. And that appears quite neatly. But if all fields are missed as in the attachment in this link: Link

the page looks untidy and disorganised.

What would be the best way - I prefer to avoid pop-ups - of displaying these errors neatly, please?

The code looks like this:

If Not IsValidEmail(email) Then
errorCount = errorCount + 1
Response.Write "<span style=""color:red"">[b]You did not enter a valid email address.<br>Please enter a valid Email address[/b]<br></span><br>"
End If

If name = "" Then
errorCount = errorCount + 1
Response.Write "<span style=""color:red"">[b]You did not enter a Name.<br>Please complete the Name field[/b]<br></span><br>"
End If

If message = "" Then
errorCount = errorCount + 1
Response.Write "<span style=""color:red"">[b]You did not enter a Message.<br>Please complete the Message field[/b]<br></span><br>"
End If

If errorCount = 3 Then
Response.Write "<span style=""color:red"">[b]You have not completed any fields. <br>Please complete all fields[/b][b][/b]<br></span><br>"
End If

Thanks!

 

[feherke]

Hi

First of all, as you posted this in the HTML forum and you document is already HTML5, I would suggest to use the dedicated [tt]required[/tt] attribute.

Then I would prefer to see each error message beside the referred [tt]input[/tt].

Regarding the disorganised part, better do not display individual messages immediately, instead collect them in a variable. Then if you discover later that every validation point failed, just replace the collected messages with the generic one and display only that one.

errorMessage = ""

If Not IsValidEmail(email) Then
  errorCount = errorCount + 1
  errorMessage = errorMessage & "<span style=""color:red"">You did not enter a valid email address.<br>Please enter a valid Email address<br></span><br>"
End If

If name = "" Then
  errorCount = errorCount + 1
  errorMessage = errorMessage & "<span style=""color:red"">You did not enter a Name.<br>Please complete the Name field<br></span><br>"
End If

If message = "" Then
  errorCount = errorCount + 1
  errorMessage = errorMessage & "<span style=""color:red"">You did not enter a Message.<br>Please complete the Message field<br></span><br>"
End If

If errorCount = 3 Then
  errorMessage = "<span style=""color:red"">You have not completed any fields. <br>Please complete all fields<br></span><br>"
End If 

If errorMessage <> ""
  Response.Write errorMessage
End If

( Syntax is probably invalid. I do not speak this language. )

Note that your generic message says "You have not completed any fields.", which may be wrong as the email field was not checked for emptiness. I mean, if the visitor enters an invalid e-mail address and leaves the name and message empty, you will still say "not completed any".


Feherke.
feherke.ga

 

[ChrisHirst]

This; Response.Write " says this is a ASP vBscript question and should be asked in forum215

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Blueie]

Hello

Thanks for your reply and link.

When you say, 'I would prefer to see each error message beside the referred input', I take it that you mean above, or below, each form field?

Concerning 'required', I imagine that would be something like:

<p><span>Name</span><input type="text" REQUIRED class="input" name="name" value="<% =name %>"></p>

In an earlier part of the code which I didn't show, I have checked for email validation.

I will try out your suuggestion:

If errorMessage <> ""
  Response.Write errorMessage
End If

Thanks again!

 

[Blueie]

Hello Chris

I thought this was the HTML, XHTML & CSS Forum?

Cheers

 

[ChrisHirst]

It is BUT your code is ASP vBScript WRITING HTML code to the browser and as such is over and done well before it gets to the browser.

It is the server side code that determines what HTML code the browsers gets served to it and therefore what message is going to be displayed. HTML/CSS can only decide what the colour or font size it is going to be based on the data that the server provides.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Blueie]

Hello Chris

Thanks again for your message.

Yes, I understand. The purpose of my post was how best to have HTML/CSS display that ASP error - its position on the page - because at the moment it looks untidy.

 

[ChrisHirst]

The link SHOULD have been forum333 by the way. Brain disconnected from fingers.


You output "response.write()" it at the appropriate place in the data stream as the document is re-generated and style it accordingly.

if you want it above the input, that is where the output code should be.

If you simply output it where ever it happens to be triggered, it will 'look untidy'




Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Blueie]

Many thanks again, Chris.

You have given me something to work on now!

 

[1DMF]

Concerning 'required', I imagine that would be something like:

Not to be pedantic, but....

<input type="text" [highlight #FCE94F]required="required"[/highlight] class="input" name="name" value="<% =name %>">

Yes you can just put 'required', but it should be lowercase, though I always prefer to use the full syntax for all Boolean type attributes.

required="required"
checked="checked"
disabled="disabled"

etc...

3.2.2 Boolean attributes

A number of attributes in HTML5 are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

http://www.w3.org/TR/2008/WD-html5-20080610/semantics.html

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[Blueie]

Hello IDMF

Thanks for clarifying. So it would be:

<p><span>Name</span><input type="text" [b]required="required"[/b] class="input" name="name" value="<% =name %>"></p>

<p><span>Email Address</span><input type="text" [b]required="required"[/b] class="input" name="email" value="<% =email %>"></p>

<p><span>Message</span><textarea rows="8" [b]required="required"[/b] class="input" name="message" cols="50"><% =message %></textarea></p>

<p><span>Please answer the following: 9 + 3 = ?</span><input type="text" [b]required="required"[/b] name="user_answer" class="contact" /><input type="hidden" name="answer" value="whatever" /></p>

Thanks!

 

[Blueie]

Hello

Yes, according to this site: Link 'required' can only be used with text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file. So in my case, it would only be Name and Email (not the Message field) and the example they give is:

<form action="demo_form.asp">
   Username: <input type="text" name="usrname" [b]required[/b]>
   <input type="submit">
</form>

Thanks for your help.

 

[1DMF]

According to W3Fools it is supported :

http://www.w3schools.com/tags/att_textarea_required.asp

Well except for Safari currently, have you tried it?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[Blueie]

I haven't tried it, no. Are there any workarounds?

 

[1DMF]

Are there any workarounds?

Only to use JS validation client side and server side validation when form is submitted.

Which is best practice anyway.

You can use the 'required' attribute and JQuery to check onsubmit, JQuery doesn't care if the attribute is supported or not when using the attribute selector.

I use this client side to validate and send the form via AJAX, it also handles server side rejection with message and I use my own custom JQUI dialog helper to popup a message to user.

$('#myform').on('submit',function(e){

        // stop normal submit
        e.preventDefault();

        var frm = $(this);
        var formOK = true;

       // validate required
       frm.find('[required]').each(function(){   
            if($(this).val() == '')
            {        
                // do what ever to inform user
                formOK = false;
            }            
       });    
       
       if(formOK){
           sendForm(frm);
       }
}

function sendForm(frm)
{
    // serialise form with QS
    var qs = frm.serialize(); 
    
    // hide form and display wait message    
    $('#'+$(frm).attr('id')+'_wait').html('Please wait, processing request!');    
    $(frm).hide('slide',function(){
        $('#'+$(frm).attr('id')+'_wait').show('slide');                       
    }); 
    
    // send form via AJAX
    $.ajax({
        url: 'your server side script',  // server script to process data
        type: 'POST',
        data: qs, 
        success: function(data,status,jqXHR){                     
            $('#'+$(frm).attr('id')+'_wait').hide('slide',function(){
                $('#'+$(frm).attr('id')+'_wait').html('<p>Thank you for your submission.</p>');   
                $('#'+$(frm).attr('id')+'_wait').show('slide');
            });                 
        },
        error: function(jqXHR,textStatus,errorThrown){
            $('#'+$(frm).attr('id')+'_wait').hide('slide',function(){        
                $(frm).show('slide',function(){showDialog({content:errorThrown});});
            });   
        }

    });
}

// show dialog popup helper
function showDialog(options)
{
    
    // remove any exisitng dialogs!
    $('.ui-dialog').remove(); 
    
    // default options      
    var myOptions = { 
      position:{ my: 'center', at: 'center', of: window },
      modal:true,
      minWidth:500,
      maxWidth:1000,
      minHeight:100,
      maxHeight:1000,
      width:'auto',
      height:'auto',
      show:'explode',
      hide:'explode',
      resizable: false             
    };
    
    // merge supplied options
    $.extend(true, myOptions, options);
    
    // check for dialog elemment
    if($('#dialog').length == 0)
    {
        $( '<div/>', {id:'dialog'}).appendTo( 'body' );
    }
    
    // add message content
    $( '#dialog' ).html(myOptions.content);
    
    // check if title provided
    if(!myOptions.title)
    {
        myOptions.title = 'The following error has occured...';
    }
          
    // add buttons (default CLOSE)
    if(myOptions.buttons)
    {               
        // check if close icon needed
        if(myOptions.buttons.length === 0)
        {
            myOptions.dialogClass = 'no-close';
        }        

    }
    else
    {
      myOptions.dialogClass = undefined;
      myOptions.buttons = [{    
          text: 'CLOSE',    
          click: function() {$( this ).dialog( 'close' );}, 
          title: 'Close Window'
      }];
    }
        
    // show dialog
    $( '#dialog' ).dialog(myOptions);

}

This is untested having hacked some of my prod code for an example, but should give you the jist of how to use JQuery and process your form client side.

I also do stuff with with the HTML5 validity API and have cool WYSIWYG icons to display real-time validation to the user.

You can see it in action here :

http://www.homeloanpartnership.com/events/

, although it doesn't include a textarea on the form, it would work if it did!

Should give you something to play with


"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[Blueie]

The work you have done on your form on the homeloanpartnership is certainly impressive and works effectively.

Well done!

I will work my way through the code you have kindly provided, but it looks daunting!

Thanks again.

 

[1DMF]

It's not so hard once you get your head round the basics.

Plus you have found the right place to ask for help should you get stuck.

Though if the question is related to the JS and not the markup you really need to post it in forum216


"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music