INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Displaying Errors

Displaying Errors

(OP)
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:

CODE -->

If Not IsValidEmail(email) Then
errorCount = errorCount + 1
Response.Write "<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
Response.Write "<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
Response.Write "<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
Response.Write "<span style=""color:red"">You have not completed any fields. <br>Please complete all fields<br></span><br>"
End If 

Thanks!

RE: Displaying Errors

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 required attribute.

Then I would prefer to see each error message beside the referred input.

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.

CODE --> just guessing

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

RE: Displaying Errors

This; Response.Write " says this is a ASP vBscript question and should be asked in forum215: HTML, XHTML & CSS

Chris.

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

RE: Displaying Errors

(OP)
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:

CODE

<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:

CODE

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

Thanks again!

RE: Displaying Errors

(OP)
Hello Chris

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

Cheers

RE: Displaying Errors

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

RE: Displaying Errors

(OP)
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.

RE: Displaying Errors

The link SHOULD have been forum333: Microsoft: ASP (Active Server Pages) 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

RE: Displaying Errors

(OP)
Many thanks again, Chris.

You have given me something to work on now!

RE: Displaying Errors

Quote:

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

Not to be pedantic, but....

CODE

<input type="text" required="required" 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...

Quote:


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/semant...

"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

RE: Displaying Errors

(OP)
Hello IDMF

Thanks for clarifying. So it would be:

CODE -->

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

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

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

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

Thanks!

RE: Displaying Errors

(OP)
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:

CODE -->

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

Thanks for your help.

RE: Displaying Errors

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

RE: Displaying Errors

Quote:

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.

CODE

$('#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 smile

"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

RE: Displaying Errors

(OP)
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.

RE: Displaying Errors

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: Javascript

"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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close