WEB error message help

Discussion in 'OT Technology' started by AnoesisX, Jul 11, 2008.

  1. AnoesisX

    AnoesisX New Member

    Joined:
    Feb 19, 2005
    Messages:
    2,868
    Likes Received:
    0
    Location:
    Boca Rotten, Florida
    I'm trying to get this to work. Its a sign up page and all fields are required and if you skip one an error pops up next to the entry field and says enter name date of birth etc. Problem is the error messages are not aligned to the corresponding text boxes. I tried to make a div for each error but its does the same thing and is messes up the layout of the page. any help?
    Code:
    <?php session_start(); ?>
    <!-- saved from url=(0022)http://internet.e-mail -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>The South Florida Jimmy</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <script type="text/javascript" src="js/rotate.js"></script>
    <script type="text/javascript" src="js/validation.js"></script>
    <script type="text/javascript">
        function clearText(obj) {
            if (obj.value == "mm/dd/yyyy") {
                obj.value = "";
            }
            return;
        }
    </script>
    <style type="text/css">
    <!--
    .style1 {
        color: #000000;
        font-weight: bold;
    }
    .style2 {
        font-size: 18px
    }
    .style3 {
        color: #000066;
        font-weight: bold;
    }
    -->
    </style>
    </head>
    
    <body id="dark" onload="document.joinForm.fname.focus()">
        <div id="main">
            <div class="container">
            
    <div id="header">
                
                    <ul class="style2" id="menu">
                         <li><a href="index.php">HOME</a>                    </li>
                         <li><a href="" class="style2">CURRENT ISSUE</a></li>
                         <li><a href="gallery.php">GALLERY</a></li>
                         <li><a href="">ADVERTISE</a></li>
                         <li><a href="">CONTACT</a></li>
                  </ul>
    <p>
                    
                     <div id="logo">
                        <h1>Creatif</h1>
                    <small>A Family of Rockstar Wordpress Them</small></div>
                
                <div id="block_featured" class="block">
                    <img src="images/ribbon_featured.png" class="ribbon" alt="Featured Project"/>
                    <div class="block_inside">
                    
                        <div class="join_image_block"><img src="join_side_text.png" alt="Eden" width="45" height="318" /></div>
        <div class="text_block_left">
        
             <div class="msg" id="msg">eror1</div>
             
            <form method="post" action="process.php" name="joinForm">          
              <p class="req_note">*All Fields Are Required</p> 
              
              <label for="fname">First Name</label>
              <p><input type="text" name="fname" id="fname" <?php if(isset($_GET['fname'])){echo "value=\"$_GET[fname]\"";} ?> onblur="checkFname(this)" /></p>
              
              <label for="lname">Last Name</label>
              <p><input type="text" name="lname" id="lname" <?php if(isset($_GET['fname'])){echo "value=\"$_GET[lname]\"";} ?> onblur="checkLname(this)" /></p>
              
              <label for="email">Email Address</label>
              <p><input type="text" name="email" id="email" <?php if(isset($_GET['fname'])){echo "value=\"$_GET[email]\"";} ?> onblur="validateEmail(this)"/></p>
              <p class="note">*Your email address will not be used for spam, promise.</p>
              
              <label for="bday">Birth Day</label>
              <p><input type="text" name="bday" id="bday" <?php if(isset($_GET['bday'])){echo "value=\"$_GET[bday]\"";}else{ echo "value='mm/dd/yyyy'";} ?> 
                                                                                  onfocus="clearText(this)" onblur="checkBday(this)"/></p>
              
              <label for="password1">Password</label>
              <p><input type="password" name="pass1" id="pass1" /></p>
              
              <label for="password2">Confirm Password</label>
              <p><input type="password" name="pass2" id="pass2" onblur="checkPwd(this)" /></p>
              
                  <fieldset>
                  <legend>Code</legend>
                      <table border="0">
                          <tr>
                          <td><input name="user_code" id="user_code" type="text" size="10" /></td>
                          <td><img src="pngimg.php" alt="code"/></td>
                        </tr>
                </table>
                   </fieldset>
              <br />
              <?php if(isset($_GET['ret'])) { echo "<input type='hidden' name='ret' value='$_GET[ret]' />"; }?>
              <input name="submit_join" type="submit" value="Sign Up!" />
            </form>          
        </div>
         
                      <div class="small_text_block">
                        <span class="image_block"><img src="images/juneissue-1.jpg" alt="Eden" width="239" height="310"/></span>
                      </div>               
                  </div>
              </div>
                
    <div id="block_portfolio">
                
                    <div id="portfolio_items">
                    
                        <div class="mini_portfolio_item">
                          <img src="images/ribbon_recent.png" class="ribbon" alt="Recent Projects"/>
    <div class="block_inside">
                                <table width="536" border="0" align="center" cellpadding="0" cellspacing="6">
      <tr>
        <td width="100"><img src="images/testpartypic.jpg" alt="" width="100" height="100" /></td>
        <td width="100"><img src="images/testpartypic.jpg" alt="" width="100" height="100" /></td>
        <td width="100"><img src="images/testpartypic.jpg" alt="" width="100" height="100" /></td>
        <td width="100"><img src="images/testpartypic.jpg" alt="" width="100" height="100" /></td>
        <td width="100"><img src="images/testpartypic.jpg" alt="" width="100" height="100" /></td>
        
      </tr>
    </table>
    
                          </div>                    
                        </div>
                        
    <div class="mini_portfolio_item">
                            <div class="block_inside">
                                <img src="images/sample_mini_portfolio2.jpg" class="thumbnail"  alt="CollisTaeed" />
                                <h3>test</h3>
                                <p>. <a href="#">View Project</a></p>
              </div>                    
                        </div>
                        
                        <div class="mini_portfolio_item">
                            <div class="block_inside">
                                <img src="images/" class="thumbnail" alt="PSDTUTS"  />
                                <h3>bl</h3>
                              <p>jfjffjfj<a href="#">View Project</a></p>
                            </div>                    
                        </div>
                    
                    </div>
                   
                </div>
            
            </div>
        </div>
    
    <div id="footer">
            <div class="container"></div>
    </div>
    </body>
    </html>
    CSS:
    Code:
    @charset "UTF-8";
    /* 
        Background-Styles 
    */
    
    body {
        margin:0px;
        padding:0px;
        background-color:#131211;
        font-family:Arial, Helvetica, sans-serif;
        color:#7f7d78;
        font-size:13px;
        line-height:19px;
    }
    #main {
        background:#c4c0be url(images/background_light_slice.jpg) repeat-x;
        padding-bottom:30px;
    }
    #main .container {
        background-image:url(images/background_light.jpg);
        background-repeat:no-repeat;
    }
    #footer {
        background-image:url(images/background_footer.jpg);
        background-repeat:repeat-x;
        padding:40px;
        position:relative;
        top:-20px;
        min-height:130px;
    }
    .container {
        width:920px;
        position:relative;
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
    }
    
    
    /* 
        Header-Styles 
    */
    
    #header {
        padding-top:20px;
        padding-bottom:20px;
    }
    #logo h1, #logo small {
        margin:10px;
        display:block;
        text-indent:-9999px;
    }
    #logo {
        background-image:url(images/logo.png);
        background-repeat:no-repeat;
        width:864px;
        height:187px;
        
    }
    ul#menu {
        margin:0px;
        padding:0px;
        position:absolute;
        right:0px;
        width: 404px;
    }
    
    ul#menu li {
        display:inline;
        margin-left:12px;
    }
    ul#menu li a {
        text-decoration:none;
        color:#716d6a;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:10px;
        font-weight:bold;
        text-transform:uppercase;
    }
    ul#menu li a.active, ul#menu li a:hover {
        color:#211e1e;
    }
    ul#settings {
        margin:0px;
        padding:0px;
        position:absolute;
        left:10px;
        width: 404px;
    }
    ul#settings li {
        display:inline;
        margin-left:12px;
    }
    ul#settings li a {
        text-decoration:none;
        color:#716d6a;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:10px;
        font-weight:bold;
        text-transform:uppercase;
    }
    ul#settings li a.active, ul#settings li a:hover {
        color:#EEEEEE;
    }
    
    /* 
        Block-Styles 
    */
    
    .block {
        border:1px solid #a3a09e;
        background-color:#ffffff;
        margin-bottom:20px;
        position:relative;
    }
    .ribbon {
        position:absolute;
        top:-3px;
        right:-3px;
    }
    .block_inside {
        display:block;
        border:1px solid #ffffff;
        background: #ffffff url(images/bg.jpg) repeat-x;
        padding:12px;
        overflow:auto;
    }
    .image_block {
        padding:5px 0px 1px 10px;
        float:left;
    }
    .join_image_block {
        float:left;
        padding-top: 5px;
        padding-right: 30px;
        padding-bottom: 1px;
        padding-left: 10px;
    }
    .image_block img {
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-style: hidden;
        border-right-style: hidden;
        border-bottom-style: hidden;
        border-left-style: hidden;
    }
    .text_block {
        float:right;
        width:500px;
        margin-left:15px;
        padding-top:13px;
    }
    .small_text_block {
        float:right;
        width:320px;
        margin-left:15px;
        padding-top:13px;
    }
    .text_block_left {
        float:left;
        width:400px;
        margin-left:15px;
        padding-top:13px;
        margin-bottom: 15px;
        color: #333333;
        position: relative;
    }
    
    #block_featuredblog .text_block { padding-top:5px }
    
    
    /*
        Portfolio-Home-Styles
    */
    
    #block_portfolio {
        overflow:auto;
        margin-bottom:20px;
    }
    #portfolio_items {
        width:560px;
        margin-right:25px;
        float:left;
        min-height:100px;
        padding-top:3px;
    }
    #text_column {
        float:right;
        width:310px;
        background-image: url(images/loginbg.jpg);
        padding: 10px;
    }
    #text_column img {
        margin-bottom:20px;
        position:relative;
        left:6px;
        padding: 10px;
    }
    #text_column h2#text_title { 
        text-indent:-9999px;
        background-image:url(images/creatif.jpg);
        background-repeat:no-repeat;
        width:310px;
        height:35px;
    }
    
    .mini_portfolio_item {
        border:1px solid #a3a09e;
        margin-bottom:10px;
        position:relative;
    }
    .mini_portfolio_item .block_inside {
        background:none;
        background-color:#e2dddc;
        padding-top: 25px;
        padding-right: 15px;
        padding-bottom: 15px;
        padding-left: 15px;
    }
    .mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }
    
    
    /*
        Block-Content-Styles
    */
    
    #content_area {
        width:665px;
        float:left;
    }
    #content_area .block_inside {
        min-height:400px;
    }
    #sidebar {
        float:left;
        width:281px;
        position:relative;
        left:-1px;
        margin-top:15px;
        background-color:#e2dddc;
        border:1px solid #a3a09e;
    }
    #sidebar .block_inside {
        background:none;
        background-color:#e2dddc;
    }
    
    #sidebar h3 {
        font-size:20px;
        line-height:23px;
    }
    #sidebar ul { margin:10px 0px 30px 0px; padding:0px; }
    #sidebar ul li { list-style:none; margin:0px 0px 5px 0px; padding:0px; }
    #sidebar ul li a { color:#7f7d78; }
    #sidebar ul li a:hover { color:#0172dd; text-decoration:none; }
    
    
    #content_area h2 { font-size:32px; line-height:31px; }
    
    #content_area .separator {
        border-top:1px solid #e3e3e3;
        margin-top:40px;
        padding-top:40px;
    }
    
    
    /* 
        Text-Styles   
    */
    
    h2 {
        margin:0px 0px 10px 0px;
        font-size:36px;
        font-family:Helvetica, Arial, Sans-serif;
        color:#000000;
        line-height:39px;
        letter-spacing:-1px;
    }
    h3 {
        margin:10px 0px 5px 0px;
        font-size:14px;
        line-height:21px;
        font-family:Helvetica, Arial, Sans-serif;
        color:#000000;
    }
    h4 {
        color:#007de2;
        margin:0px 0px 0px 0px;
    }
    small {
        color:#595856;
        font-weight:bold;
        font-size:11px;
        display:block;
        margin-bottom:15px;
    }
    a {
        color:#26689f;
        text-decoration:none;
    }
    small a {
        color:#007de2;
    }
    a:hover { text-decoration:underline; }
    p {
        margin-top: -10px;
        margin-right: 0px;
        margin-bottom: 15px;
        margin-left: 0px;
    }
    
    a.button {
        background:#32312f url(images/button_bg.jpg) repeat-x;
        color: #ffffff;
        text-decoration: none;
        border:1px solid #32312f;
        text-transform:uppercase;
        font-size:9px;
        line-height:25px;
        padding-top: 5px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 10px;
    }
    a.button:hover {
        background:#007de2 url(images/button_bg_o.jpg) repeat-x;
        border-color:#007de2;
    }
    
    /*
        Footer-Styles
    */
    
    #footer {
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:10px;
    }
    .footer_column {
        float:left;
        width:120px;
        margin-right:30px;
    }
    #footer .long {
        width:610px;
    }
    #footer h3 {
        color:#e2dddc;
        text-transform:uppercase;
        font-size:10px;
    }
    .footer_column ul li, .footer_column ul {
        list-style:none;
        margin:0px;
        padding:0px;
    }
    
    
    
    
    
    
    /* 
        Miscellaneous-Styles   
    */
    #dark .container #header #block_featured .block_inside .small_text_block #logout {
        float: right;
        margin-right:10pt;
    }
    
    
    
    /* Form Styles */
    #dark .container #header #block_featured .block_inside .text_block_left label {
        font-weight: bold;
        color: #333333;
        margin-bottom:5pt;
    }
    #dark .container #header #block_featured .block_inside .text_block_left .note {
        font-size: 10px;
        font-style: italic;
        margin-top: -15px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px;
    }
    #dark .container #header #block_featured .block_inside .text_block_left .req_note {
        color: #990000;
        font-size: 10px;
        font-style: italic;
        margin-top: -15px;
    }
    #dark .container #header #block_featured .block_inside .text_block_left .error_note {
        font-style: italic;
        color: #990000;
    }
    #dark .container #header #block_featured .block_inside .text_block_left #captcha {
        margin-left: 20px;
    }
    #response {
        margin-top: 30px;
    }
    #dark .container #header #block_featured .block_inside .text_block_left label {
        padding-bottom: 5px;
        display:block;
    }
    #dark .container #header #block_featured .block_inside .text_block_left fieldset {
        width: 200px;
    }
    #dark .container #header #block_featured .block_inside .text_block_left .msg {
        color: #990000;
        font-weight:bold;
        width:220px;
        position:absolute;
        top:40px;
        right:0px;
    }
    
    
    /* Fix up IE6 PNG Support */
    img, #logo { behavior: url(scripts/iepngfix.htc); }
    
    #login_error {
        margin-top:-15pt;
    }
    
    
    
    /*
        Alternate Styles
    */
    body#dark {
        background-color:#1e1d1b;
    }
    body#dark #main {
        background:#292826 url(images/background_dark_slice.jpg) repeat-x;
    }
    body#dark #main .container {
        background-image:url(images/background_dark.jpg);
    }
    body#dark #footer {
        background-image:url(images/background_dark_footer.jpg);
    }
    body#dark ul#menu li a.active, ul#menu li a:hover {
        color:#ffffff;
    }
    body#dark .block, body#dark .mini_portfolio_item {
        border-color:#1b1a19;
        background-image: url(images/bg.jpg);
    }
    body#dark #text_column h2#text_title { 
        background-image:url(images/creatif_dark.jpg);
    }
    #dark .container #header #block_portfolio #portfolio_items .mini_portfolio_item .block_inside a img {
        border: none;
    }
    
    
     
  2. AnoesisX

    AnoesisX New Member

    Joined:
    Feb 19, 2005
    Messages:
    2,868
    Likes Received:
    0
    Location:
    Boca Rotten, Florida
    anyone?
     
  3. EkriirkE

    EkriirkE Zika Xenu OT Supporter

    Joined:
    Jan 11, 2004
    Messages:
    14,799
    Likes Received:
    0
    Location:
    Dublin & San Francisco, CA
    Do you have the js for this.. annoying errors :mad:
     
  4. AnoesisX

    AnoesisX New Member

    Joined:
    Feb 19, 2005
    Messages:
    2,868
    Likes Received:
    0
    Location:
    Boca Rotten, Florida
    Code:
    function validateEmail ( field ) {
     emailpat = /^([a-zA-Z0-9])+([\.a-zA-Z0-9_-])*@([a-zA-Z0-9])+(\.[a-zA-Z0-9_-]+)+$/;
     if( !emailpat.test( field.value ) ) {
      var error_msg="Invalid Email Address<br />";
      document.getElementById('msg').innerHTML += error_msg;
      field.focus();
      field.select();
      return false;
     }
     return true;
    }
     
     function checkBday(field) {
        if(!/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/.test(field.value) ) {
            var error_msg="Birthday Must Be MM/DD/YYYY<br />";
            document.getElementById('msg').innerHTML += error_msg;
            field.focus();
            return;
        }
     }
     
     function checkFname(field) {
        if (field.value=='') {
            var error_msg="Hey! Tell Us Your First Name!<br />";
            document.getElementById('msg').innerHTML += error_msg;
            field.focus();
            return;    
        }
     }
     function checkLname(field) {
        if (field.value=='') {
            var error_msg="Hey! Tell Us Your Last Name!<br />";
            document.getElementById('msg').innerHTML += error_msg;
            field.focus();
            return;    
        }
     }
     function checkPwd(field) {
        if (document.getElementById("pass1").value != field.value) {
            var error_msg="Passwords Don't Match<br />";
            document.getElementById('msg').innerHTML += error_msg;
            field.focus();
            return;        
        }
     }
     

Share This Page