1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved Javascript Form Validation

Discussion in 'Web Design & Development' started by EspressoBean, Jun 8, 2018.

Advertisement
  1. EspressoBean

    EspressoBean Thread Starter

    Joined:
    Feb 29, 2016
    Messages:
    246
    So I have a form validator which I want the form validation to be handled on the backend by the server for security purposes rather than on the front end. I would also like to keep the user's file extensions to be the same, so if their website would have an extension of .html then it would remain .html. That being said I would like to have a Javascript that will make the text fields red (to start off with). So I have the following Javascript code:

    **Hastebin:** [https://hastebin.com/acedowecus.js](https://hastebin.com/acedowecus.js)

    Code:
        function FormValidation(){
           //First Name Validation
           var fn=document.getElementById('firstname').value;
           if(fn == ""){
               document.getElementById('firstname').style.borderColor = "red";
               return false;
           }else{
               document.getElementById('firstname').style.borderColor = "green";
           }
           if (/^[0-9]+$/.test(document.getElementById("firstname").value)) {
               document.getElementById('firstname').style.borderColor = "red";
               return false;
           }else{
               document.getElementById('firstname').style.borderColor = "green";
           }
           if(fn.length <=2){
               document.getElementById('firstname').style.borderColor = "red";
               return false;
           }else{
               document.getElementById('firstname').style.borderColor = "green";
           }
        }
    and my PHP code:

    **Hastebin:** [https://hastebin.com/eyotunureb.php](https://hastebin.com/eyotunureb.php)

    PHP:
        <?php
        ob_start
    ();
        
    /* Put Here email where you will receive Contact message*/
        
    $yourEmail "[email protected]"// <== Your Email
        
    $secret 'LALALALAALALALALALALA'// <==Your recaptcha Privte Key
        // You can get Key from here: https://www.google.com/recaptcha/admin
        /*---------------------------------------*/
      
        // ---------------------Start the recaptcha ------------------------------------//
        
    if(isset($_POST['g-recaptcha-response']) && ($_POST['g-recaptcha-response'])){
                
    session_start();
            
    $ip $_SERVER['REMOTE_ADDR'];
            
    $captcha $_POST['g-recaptcha-response'];
            
    $response file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$captcha&remoteip=$ip");
            
    $result json_decode($response,TRUE);
                if(
    $result['success'] == 1){
                    
    $_SESSION['result'] = $result['success'];
                    }
      
        
    // --------------------End Of the Captcha Check------------------------- //
      
        /////////////Showing all errors in array : DO NOT DELETE THIS
        
    $formerrors = array();
        
    ///////////////////This Array will Hold all errors
      
        // Start Captcha
        
    if(!isset($_SESSION['result']) || $_SESSION['result'] == 0){
            
    $formerrors[] =  'Captcha Error';
        }
        
    //end Captcha
      
      
        // remove this to make name not required
        
    if(empty($_POST['name'])){
        
    $formerrors[] = "Name Cannot be empty";
        }
        
    // End name
      
      
        // Remove this to make email not required
        
    if(empty($_POST['email'])){
          
    $formerrors[] = "Email Cannot be empty";
        }
        
    // End of email
      
        // Remove this to make email not required
        
    if(filter_var($_POST['email'],FILTER_VALIDATE_EMAIL) == FALSE){
          
    $formerrors[] = "Make Sure Email is valid";
        }
        
    // End of email
      
        // Remove this to make Phone not required
        
    if(empty($_POST['phone'])){
          
    $formerrors[] = "Phone Number Cannot be empty";
        }
        
    // End of Phone
      
      
      
        // Remove this to make Phone not required
        
    if(!is_numeric($_POST['phone'])){
          
    $formerrors[] = "Phone Is not valid";
        }
        
    // End of Phone
      
      
      
        // Remove this to make Message not required
        
    if(empty($_POST['message'])){
           
    $formerrors[] = "Message Cannot be empty";
        }
        
    // End Of Message
      
      
        // Remove this to make Subject not required
        
    if(empty($_POST['subject'])){
           
    $formerrors[] = "Select a subject First";
        }
        
    // End Of Subject
      
      
      
        /* Your New inputs */
      
            // CODE HERE
      
        /* end of new Inputs*/
      
      
      
      
        // End Showing Errors In Array
      
      
        
    if(count($formerrors) == 0){
         
    // Saving data in variable :
            
    $name $_POST['name'];
            
    $email $_POST['email'];
            
    $phone $_POST['phone'];
            
    $title $_POST['subject'];
            
    $message $_POST['message'];
            
    /* Your New inputs */
      
                // $newinput = $_POST['new-input'] // new-input same as ID and ajax
      
            /* end of new Inputs*/
      
            //If No Error in the Array Start Sending the email
            
    $to $yourEmail;    // Email to receive contacts
            
    $from $email;
            
    $subject 'Contact Form Email : ' $title;
            
    $message '<style>
                        body{background-color:#fefefe}
                        .email-style {padding: 30px;background: #fafafa;font-size: 18px;border: 1px solid #ddd;width: 60%;margin: auto;}
                        p {padding: 15px 0px;}
                        </style>
      
                        <div class="email-style"><p> '
    .$title '</p>
      
                        <p>Contact Full Name : '
    .$name ' </p>
      
                        <p>Contact Email : '
    .$email ' </p>
      
                        <p>Contact Phone Number : '
    .$phone '</p>
      
                        <p>Message : '
    .$message ' </p>
      
                        <p>Cheers,</p>
                        <p>'
    .$name.' Via Contact Form</p></div>';
      
            
    $headers "From: $from\n";
            
    $headers .= "MIME-Version: 1.0\n";
            
    $headers .= "Content-type: text/html; charset=iso-8859-1\n";
               if( 
    mail($to$subject$message$headers) ){
                    echo 
    "sent";
                    
    session_unset();
                    
    session_destroy();
                  } else {
                           echo 
    "The server failed to send the message. Please try again later.";
                        }
      
                            
    // If there are Errors in form :
           
    }else{
      
            
    //if there are Errors in the Array , Show errors in form
            
    echo '<div id="contact-errors">';
            foreach(
    $formerrors as $error){
             echo 
    '<div class="errors-section mdl-cell mdl-cell--12-col">
                   <span class="mdl-chip mdl-chip--contact">
                   <span class="mdl-chip__contact mdl-color-text--white"><i class="material-icons error-form">error_outline</i></span>
                   <span class="mdl-chip__text">' 
    $error '</span>
                   </span></div>'
    ;}
      
            echo 
    '</div>';}// End of errors here
        
    }else{
            echo 
    'Fill in Captcha ';
      
        }
      
        
    ob_flush();
        
    ?>
    But but my question is, how do I properly execute this in javascript? Let's assume I am using Bootstrap 4 framework.

    How do I properly have the Javascript select the proper CSS code and alter the input fields? Is there a way to do it that way I can interchange it with other platforms fairly easily?

    So I need the script to thrown in:

    * form\-control\-success
    * form\-control\-danger

    Depending on the situation, what would be the best way to execute this?
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...

Short URL to this thread: https://techguy.org/1211326

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice