www.webdeveloper.com
Results 1 to 8 of 8

Thread: My PHP Form validation does not work correctly

  1. #1
    Join Date
    Oct 2013
    Posts
    5

    My PHP Form validation does not work correctly

    When I submit button without any information I got this error message: "Please check if you've filled all the fields with valid information. Thank you." While every input text has to have this text "This field is required." below instead of just one message for the whole form. In the same time form works when the information was submitted.

    Thank you
    Ben






    <?php
    //If the form is submitted
    if(isset($_POST['submit'])) {

    //Check to make sure that the name field is not empty
    if(trim($_POST['contactname']) == '') {
    $hasError = true;
    } else {
    $name = trim($_POST['contactname']);
    }

    //Check to make sure that the subject field is not empty
    if(trim($_POST['subject']) == '') {
    $hasError = true;
    } else {
    $subject = trim($_POST['subject']);
    }

    //Check to make sure sure that a valid email address is submitted
    if(trim($_POST['email']) == '') {
    $hasError = true;
    } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
    $hasError = true;
    } else {
    $email = trim($_POST['email']);
    }

    //Check to make sure comments were entered
    if(trim($_POST['message']) == '') {
    $hasError = true;
    } else {
    if(function_exists('stripslashes')) {
    $comments = stripslashes(trim($_POST['message']));
    } else {
    $comments = trim($_POST['message']);
    }
    }



    //If there is no error, send the email
    if(!isset($hasError)) {
    $emailTo = 'vandreyuk@gmail.com'; //Put your own email address here
    $body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
    $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

    mail($emailTo, $subject, $body, $headers);
    $emailSent = true;
    }
    }
    ?>


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="Vkreative studio, portfolio" />
    <meta name="Description" content="Web, Print, Mobile device Design, html, css, xhtml, javascript, jquery, cascading style sheets" />
    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-27955373-1']);
    _gaq.push(['_trackPageview']); (function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
    })();
    </script>
    <link rel="stylesheet" type="text/css" href="main_style.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--Collapsable Menu-->
    <script src="clbsmenu/jquery-1.2.1.min.js" type="text/javascript"></script>
    <script src="clbsmenu/menu-collapsed.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="clbsmenu/style.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript">
    <script src="jquery.validate.pack.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(document).ready(function(){
    $("#contactform").validate();
    });
    </script>

    <style type="text/css">

    body {
    font-family:Arial, Tahoma, sans-serif;
    }
    #contact-wrapper {
    width:430px;
    margin-top: 158px;
    margin-left: 340px;
    color:white;
    font-size: 12px;
    }
    #contact-wrapper div {
    clear:both;
    margin:1em 0;
    }
    #contact-wrapper label {
    display:block;
    float:none;
    width:auto;
    }
    form#contactform input {
    border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
    border-style:solid;
    border-width:1px;
    padding:5px;
    font-size:17px;

    }
    form#contactform textarea {
    font-family:Arial, Tahoma, Helvetica, sans-serif;
    font-size:100%;
    margin: 0px 0px;
    height:120px;
    border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
    border-style:solid;
    border-width:1px;
    }
    .submitbutton {
    margin-left:248px;
    width:150px;
    border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
    border-style:solid;
    border-width:1px;
    font-size:16px;
    color:white;
    background-color: black;
    font-size: 17px;

    }
    .submitbutton:hover {
    background-color: #666;
    }

    }
    .submitbutton:hover {
    background-color: #666;
    }

    #contactname {
    width:385px;
    }

    #email {
    width:385px;
    }

    #subject {
    width:385px;
    }
    #message {
    width:395px;
    }
    </style>

    <title>Contact</title>
    </head>
    <body>


    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <div class="container">
    <div id="header"></div><!-- end header -->
    <div id="mid">
    <div id="navplace">
    <div class="h_mnu_01">
    <ul>
    <li>
    <a href="index.html">Home</a>
    </li>
    <li>
    <a href="about.html">About</a>
    </li>
    <li>
    <a href="portfolio.html">Portfolio</a>
    </li>
    <li>
    <a href="contact.html">Contact</a>
    </li>
    </ul>
    </div>
    </div>
    <div class="sidebar1">
    <!-- end .sidebar1 -->
    <p class="touch">get in touch</p>
    <div id="emailbox"><!-- .emailbox -->
    <p class="touch2"><i>Send me a message or just say hello, I will get back to you ASAP.</i></p>

    </div>
    <p class="touch3">contact me</p>
    <div id="social">
    <div id="mail"><img src="images/mail.png"><p class="mail">vandreyuk@gmail.com</p></div> <br /><br />
    <div id="phone"><img src="images/phone.png"><p class="phone">(760)&nbsp;471-2676</p></div>
    </div>
    </div>



    <div id="contact-wrapper">
    <?php if(isset($hasError)) { //If errors are found ?>
    <p class="error">Please check if you've filled all the fields with valid information. Thank you.</p>
    <?php } ?>

    <?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
    <p><strong>Email Successfully Sent!</strong></p>
    <p>Thank you <strong><?php echo $name;?></strong> for using my contact form! Your email was successfully sent and I will be in touch with you soon.</p>
    <?php } ?>


    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
    <div>
    <label for="name"><strong>Name:</strong></label>
    <input type="text" size="50" name="contactname" id="contactname" value="" class="required" />
    </div>

    <div>
    <label for="email"><strong>Email:</strong></label>
    <input type="text" size="50" name="email" id="email" value="" class="required email" />
    </div>

    <div>
    <label for="subject"><strong>Subject:</strong></label>
    <input type="text" size="50" name="subject" id="subject" value="" class="required" />
    </div>

    <div>
    <label for="message"><strong>Message:</strong></label>
    <textarea rows="5" cols="50" name="message" id="message" class="required"></textarea>
    </div>
    <input type="submit" class="submitbutton" value="Send Message" name="submit" />
    </form>
    </div>
    </div><!-- mid end -->
    <div class="footer">
    <div id="access">
    <!--access-->
    <a title="Twitter" href="https://twitter.com/#!/VkreativeS" target="_blank"><img class="icon_social" src="images/icon_twitter-trans.png" alt="Twitter" /></a>&nbsp;&nbsp;&nbsp; <a title="LinkedIn" href="http://www.linkedin.com/pub/veniamin-andreyuk/11/825/b02" target="_blank"><img class="icon_social" src="images/icon_linkedin-trans.png" alt="LinkedIn" /></a>&nbsp;&nbsp;
    <a title="Facebook" href="https://www.facebook.com/profile.php?id=100003376785103" target="_blank"><img class="icon_social" src="images/icon_facebook-trans.png" alt="Facebook" /></a>&nbsp;&nbsp;&nbsp;
    <div id="like" div class="fb-like" data-href="http://www.vkreativestudio.com/" data-send="true" data-layout="button_count" data-width="0" data-height="0" data-show-faces="true"></div>
    </div><!--access end-->

    <p class="copyright">
    <!--copyright-->
    Copyright &#169; 2013 Vkreative Studio. All rights reserved.

    </p><!--copyright end-->
    </div><!-- end .footer -->
    </div>
    <!-- end .container -->
    </body>
    </html>

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,304
    Welcome to the forums. If you make use of the [php], [code], and [html] BBCode tags, it will be much easier for us to read your code samples.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    Oct 2013
    Posts
    6
    What NogDog said... I will recode it for you if you wrap it in code tags so I can actually read it.

  4. #4
    Join Date
    Oct 2013
    Posts
    5
    PHP Code:
    <?php
    //If the form is submitted
    if(isset($_POST['submit'])) {

    //Check to make sure that the name field is not empty
    if(trim($_POST['contactname']) == '') {
    $hasError true;
    } else {
    $name trim($_POST['contactname']);
    }

    //Check to make sure that the subject field is not empty
    if(trim($_POST['subject']) == '') {
    $hasError true;
    } else {
    $subject trim($_POST['subject']);
    }

    //Check to make sure sure that a valid email address is submitted
    if(trim($_POST['email']) == '') {
    $hasError true;
    } else if (!
    eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$"trim($_POST['email']))) {
    $hasError true;
    } else {
    $email trim($_POST['email']);
    }

    //Check to make sure comments were entered
    if(trim($_POST['message']) == '') {
    $hasError true;
    } else {
    if(
    function_exists('stripslashes')) {
    $comments stripslashes(trim($_POST['message']));
    } else {
    $comments trim($_POST['message']);
    }
    }



    //If there is no error, send the email
    if(!isset($hasError)) {
    $emailTo 'email@email.com'//Put your own email address here
    $body "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
    $headers 'From: My Site <'.$emailTo.'>' "\r\n" 'Reply-To: ' $email;

    mail($emailTo$subject$body$headers);
    $emailSent true;
    }
    }
    ?>

    HTML Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="Vkreative studio, portfolio" />
    <meta name="Description" content="Web, Print, Mobile device Design, html, css, xhtml, javascript, jquery, cascading style sheets" />
    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-27955373-1']);
    _gaq.push(['_trackPageview']); (function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
    })();    
    </script>
    <link rel="stylesheet" type="text/css" href="main_style.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--Collapsable Menu-->
    <script src="clbsmenu/jquery-1.2.1.min.js" type="text/javascript"></script>
    <script src="clbsmenu/menu-collapsed.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="clbsmenu/style.css" />
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript">
    <script src="jquery.validate.pack.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){
    $("#contactform").validate();
    });
    </script>
    
    <style type="text/css">
    
    body {
    font-family:Arial, Tahoma, sans-serif;
    }
    #contact-wrapper {
    width:430px;
    margin-top: 158px;
    margin-left: 340px;
    color:white;
    font-size: 12px;
    }
    #contact-wrapper div {
    clear:both;
    margin:1em 0;
    }
    #contact-wrapper label {
    display:block;
    float:none;
    width:auto;
    }
    form#contactform input {
    border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
    border-style:solid;
    border-width:1px;
    padding:5px;
    font-size:17px;
    
    }
    form#contactform textarea {
    font-family:Arial, Tahoma, Helvetica, sans-serif;
    font-size:100%;
    margin: 0px 0px;
    height:120px;
    border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
    border-style:solid;
    border-width:1px;
    }
    .submitbutton {
    margin-left:248px;
    width:150px;
    border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
    border-style:solid;
    border-width:1px;
    font-size:16px;
    color:white;
    background-color: black;
    font-size: 17px;
    
    }
    .submitbutton:hover {
    background-color: #666;
    }
    
    }
    .submitbutton:hover {
    background-color: #666;
    }
    
    #contactname {
    width:385px;
    }
    
    #email {
    width:385px;
    }
    
    #subject {
    width:385px;
    }
    #message {
    width:395px;
    }
    </style>
    
    <title>Contact</title>
    </head>
    <body>
    
    
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    
    <div class="container">
    <div id="header"></div><!-- end header -->
    <div id="mid">
    <div id="navplace">
    <div class="h_mnu_01">
    <ul>
    <li>
    <a href="index.html">Home</a>
    </li>
    <li>
    <a href="about.html">About</a>
    </li>
    <li>
    <a href="portfolio.html">Portfolio</a>
    </li>
    <li>
    <a href="contact.html">Contact</a>
    </li>
    </ul>
    </div>
    </div>
    <div class="sidebar1">
    <!-- end .sidebar1 -->    
    <p class="touch">get in touch</p>
    <div id="emailbox"><!-- .emailbox -->
    <p class="touch2"><i>Send me a message or just say hello, I will get back to you ASAP.</i></p>    
    
    </div>
    <p class="touch3">contact me</p>
    <div id="social">
    <div id="mail"><img src="images/mail.png"><p class="mail">email@email.com</p></div>     <br /><br />    
    <div id="phone"><img src="images/phone.png"><p class="phone">(760)&nbsp;471-2676</p></div> 
    </div>
    </div>
    
    
    
    <div id="contact-wrapper">
    <?php if(isset($hasError)) { //If errors are found ?>
    <p class="error">Please check if you've filled all the fields with valid information. Thank you.</p>
    <?php } ?>
    
    <?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
    <p><strong>Email Successfully Sent!</strong></p>
    <p>Thank you <strong><?php echo $name;?></strong> for using my contact form! Your email was successfully sent and I will be in touch with you soon.</p>
    <?php } ?>
    
    
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
    <div>
    <label for="name"><strong>Name:</strong></label>
    <input type="text" size="50" name="contactname" id="contactname" value="" class="required" />
    </div>
    
    <div>
    <label for="email"><strong>Email:</strong></label>
    <input type="text" size="50" name="email" id="email" value="" class="required email" />
    </div>
    
    <div>
    <label for="subject"><strong>Subject:</strong></label>
    <input type="text" size="50" name="subject" id="subject" value="" class="required" />
    </div>
    
    <div>
    <label for="message"><strong>Message:</strong></label>
    <textarea rows="5" cols="50" name="message" id="message" class="required"></textarea>
    </div>
    <input type="submit" class="submitbutton" value="Send Message" name="submit" />
    </form>
    </div>
    </div><!-- mid end -->
    <div class="footer">
    
    <p class="copyright">
    <!--copyright-->
    Copyright  2013 Vkreative Studio. All rights reserved.
    
    </p><!--copyright end-->
    </div><!-- end .footer -->
    </div>
    <!-- end .container -->
    </body>
    </html>

  5. #5
    Join Date
    Oct 2013
    Posts
    5
    Here is the link where the php could be tested in real:http://vkreativestudio.com/contact.php
    I got the error message "Please check if you've filled all the fields with valid information. Thank you" when I click on Submit button without inserting any information such as Name and others. Basically, every input has to be validated separately and has separate error message below the input instead of one error message above the form.


    Thank you








    PHP Code:
    <?php//If the form is submittedif(isset($_POST['submit'])) {
    //Check to make sure that the name field is not emptyif(trim($_POST['contactname']) == '') {$hasError = true;} else {$name = trim($_POST['contactname']);}
    //Check to make sure that the subject field is not emptyif(trim($_POST['subject']) == '') {$hasError = true;} else {$subject = trim($_POST['subject']);}
    //Check to make sure sure that a valid email address is submittedif(trim($_POST['email']) == '') {$hasError = true;} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {$hasError = true;} else {$email = trim($_POST['email']);}
    //Check to make sure comments were enteredif(trim($_POST['message']) == '') {$hasError = true;} else {if(function_exists('stripslashes')) {$comments = stripslashes(trim($_POST['message']));} else {$comments = trim($_POST['message']);}}


    //If there is no error, send the emailif(!isset($hasError)) {$emailTo = 'email@email.com'; //Put your own email address here$body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
    mail($emailTo$subject$body$headers);$emailSent true;}}?>


    HTML Code:
    <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Keywords" content="Vkreative studio, portfolio" /><meta name="Description" content="Web, Print, Mobile device Design, html, css, xhtml, javascript, jquery, cascading style sheets" /><script type="text/javascript">var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-27955373-1']);_gaq.push(['_trackPageview']); (function() {var ga = document.createElement('script');ga.type = 'text/javascript';ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga, s);})(); </script><link rel="stylesheet" type="text/css" href="main_style.css" /><link rel="stylesheet" type="text/css" href="style.css" /><!--Collapsable Menu--><script src="clbsmenu/jquery-1.2.1.min.js" type="text/javascript"></script><script src="clbsmenu/menu-collapsed.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="clbsmenu/style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"><script src="jquery.validate.pack.js" type="text/javascript"></script>
    <script type="text/javascript">$(document).ready(function(){$("#contactform").validate();});</script>
    <style type="text/css">
    body {font-family:Arial, Tahoma, sans-serif;}#contact-wrapper {width:430px;margin-top: 158px;margin-left: 340px;color:white;font-size: 12px;}#contact-wrapper div {clear:both;margin:1em 0;}#contact-wrapper label {display:block;float:none;width:auto;}form#contactform input {border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;border-style:solid;border-width:1px;padding:5px;font-size:17px;
    }form#contactform textarea {font-family:Arial, Tahoma, Helvetica, sans-serif;font-size:100%;margin: 0px 0px;height:120px;border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;border-style:solid;border-width:1px;}.submitbutton {margin-left:248px;width:150px;border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;border-style:solid;border-width:1px;font-size:16px;color:white;background-color: black;font-size: 17px;
    }.submitbutton:hover {background-color: #666;}
    }.submitbutton:hover {background-color: #666;}
    #contactname {width:385px;}
    #email {width:385px;}
    #subject {width:385px;}#message {width:395px;}</style>
    <title>Contact</title></head><body>
    
    <div id="fb-root"></div><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
    <div class="container"><div id="header"></div><!-- end header --><div id="mid"><div id="navplace"><div class="h_mnu_01"><ul><li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="portfolio.html">Portfolio</a></li><li><a href="contact.html">Contact</a></li></ul></div></div><div class="sidebar1"><!-- end .sidebar1 --> <p class="touch">get in touch</p><div id="emailbox"><!-- .emailbox --><p class="touch2"><i>Send me a message or just say hello, I will get back to you ASAP.</i></p> 
    </div><p class="touch3">contact me</p><div id="social"><div id="mail"><img src="images/mail.png"><p class="mail">email@email.com</p></div> <br /><br /> <div id="phone"><img src="images/phone.png"><p class="phone">(760)&nbsp;471-2676</p></div> </div></div>
    
    
    <div id="contact-wrapper"><?php if(isset($hasError)) { //If errors are found ?><p class="error">Please check if you've filled all the fields with valid information. Thank you.</p><?php } ?>
    <?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?><p><strong>Email Successfully Sent!</strong></p><p>Thank you <strong><?php echo $name;?></strong> for using my contact form! Your email was successfully sent and I will be in touch with you soon.</p><?php } ?>
    
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform"><div><label for="name"><strong>Name:</strong></label><input type="text" size="50" name="contactname" id="contactname" value="" class="required" /></div>
    <div><label for="email"><strong>Email:</strong></label><input type="text" size="50" name="email" id="email" value="" class="required email" /></div>
    <div><label for="subject"><strong>Subject:</strong></label><input type="text" size="50" name="subject" id="subject" value="" class="required" /></div>
    <div><label for="message"><strong>Message:</strong></label><textarea rows="5" cols="50" name="message" id="message" class="required"></textarea></div><input type="submit" class="submitbutton" value="Send Message" name="submit" /></form></div></div><!-- mid end --><div class="footer"><div id="access"><!--access--><a title="Twitter" href="https://twitter.com/#!/VkreativeS" target="_blank"><img class="icon_social" src="images/icon_twitter-trans.png" alt="Twitter" /></a>&nbsp;&nbsp;&nbsp; <a title="LinkedIn" href="http://www.linkedin.com/pub/veniamin-andreyuk/11/825/b02" target="_blank"><img class="icon_social" src="images/icon_linkedin-trans.png" alt="LinkedIn" /></a>&nbsp;&nbsp; <a title="Facebook" href="https://www.facebook.com/profile.php?id=100003376785103" target="_blank"><img class="icon_social" src="images/icon_facebook-trans.png" alt="Facebook" /></a>&nbsp;&nbsp;&nbsp; <div id="like" div class="fb-like" data-href="http://www.vkreativestudio.com/" data-send="true" data-layout="button_count" data-width="0" data-height="0" data-show-faces="true"></div></div><!--access end-->
    <p class="copyright"><!--copyright-->Copyright  2013 Vkreative Studio. All rights reserved.
    </p><!--copyright end--></div><!-- end .footer --></div><!-- end .container --></body></html>

  6. #6
    Join Date
    Oct 2013
    Posts
    5
    Can you look at my code now?

    Quote Originally Posted by mrnash View Post
    What NogDog said... I will recode it for you if you wrap it in code tags so I can actually read it.

  7. #7
    Join Date
    Nov 2013
    Posts
    72
    The reason you get the "This field is required" is because of the required you used. This is HTML5 that ensure the field is not empty. If you do not want this, you need to remove required from the input tags. See the class=required?

    HTML Code:
    <div><label for="email"><strong>Email:</strong></label><input type="text" size="50" name="email" id="email" value="" class="required email" /></div>
    <div><label for="subject"><strong>Subject:</strong></label><input type="text" size="50" name="subject" id="subject" value="" class="required" /></div>
    <div><label for="message"><strong>Message:</strong></label><textarea rows="5" cols="50" name="message" id="message" class="required"> 
    The reason you get "Please check if you've filled all the fields with valid information. Thank you." is because that is what you telling it to say if any of the input fields are empty.

    PHP Code:
    <?php if(isset($hasError)) { //If errors are found ?>
    <p class="error">Please check if you've filled all the fields with valid information. Thank you.</p>
    <?php ?>

  8. #8
    Join Date
    Oct 2013
    Posts
    5
    I made changes as you suggested, it does work but I have error
    "Object does not support property or method 'validate' "
    in IE lower than 11 version (version 11 is fine), it is pointing to this piece of code:

    PHP Code:
    When 
    $("#contactform").validate();
    }); 
    and Safari does
    HTML Code:
     require
    attribute does not work and shows as the regular error message which I mentioned in previous message. I even tried modernzr but it does not change anything. Here is the form code that I already changed:

    HTML Code:
    <form method="post" action="contact.php" id="contactform">
    		<div>
    		    <label for="name"><strong>Name:</strong></label>
    			<input type="text" size="50" name="contactname" id="contactname" placerholder="Name" required>
    		</div>
    
    		<div>
    			<label for="email"><strong>Email:</strong></label>
    			<input type="text" size="50" name="email" id="email" placerholder="email" required>
    		</div>
    
    		<div>
    			<label for="subject"><strong>Subject:</strong></label>
    			<input type="text" size="50" name="subject" id="subject" placerholder="subject" required>
    		</div>
    
    		<div>
    			<label for="message"><strong>Message:</strong></label>
    			<textarea rows="5" cols="50" name="message" id="message" placerholder="message" required></textarea>
    		</div>
    	    <input type="submit" class="submitbutton" value="Send Message" name="submit" />
    	</form>
    Modernizr part in the <head> :

    Code:
    <html class="no-js">	
    <script src="modernizr.js"></script>
    <script> 
    window.onload = function() {
        // get the form and its input elements
        var form = document.forms[0],
            inputs = form.elements;
        // if no autofocus, put the focus in the first field
        if (!Modernizr.input.autofocus) {
            inputs[0].focus();
        }
        // if required not supported, emulate it
        if (!Modernizr.input.required) {
            form.onsubmit = function() {
                var required = [], att, val;
                // loop through input elements looking for required
                for (var i = 0; i < inputs.length; i++) {
                    att = inputs[i].getAttribute('required');
                    // if required, get the value and trim whitespace
                    if (att != null) {
                        val = inputs[i].value;
                        // if the value is empty, add to required array
                        if (val.replace(/^\s+|\s+$/g, '') == '') {
                            required.push(inputs[i].name);
                        }
                    }
                }
                // show alert if required array contains any elements
                if (required.length > 0) {
                    alert('The following fields are required: ' +
                        required.join(', '));
                    // prevent the form from being submitted
                    return false;
                }
            };
        }
    }
    
     </script>
    Thank you

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles