Form validation is open page instead of border the error-CodePudding

I have a form: When you press submit the page redirect to another (I embedded the .php in a page) where the errors are shown like "Name and Last Name are not valid" but I want to make when you press Submit and the text is not valid the standard Form HTML to see like "You need to insert email" or "This field is required". I have a headache because I tried a lot of thigs but nothing seems to work.


/*
 * Template Name: ThankyouPage
 */


    //wp_header(); 
    get_header();
    if(is_single() || is_page())
        include ('inc/page_header_transparent.php');
    else
        include ('inc/page_header.php');
?>
<head>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri();?>/css/bootstrap.min.css">
<link href="<?php echo get_stylesheet_directory_uri();?>/css/pages.scss">
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri();?>/css/default_thank_you.css">
</head>

<style type="text/css">

  body {
    min-width: 300px;
    font-family: 'Akkurat-Regular', sans-serif;
    background-color: #fffffe;
    color: #1a1a1a;
    text-align: center;
    word-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

  </style>
<?php
 
if(isset($_POST['email'])) {
 
     
  
    $email_to = "";
 
    $email_subject = "";
 
     
 
     
 
    function died($error) {
  
        echo "We are very sorry, but there were error(s) found with the form you submitted. ";
 
        echo "These errors appear below.<br /><br />";
 
        echo $error."<br /><br />";
 
        echo "Please go back and fix these errors.<br /><br />";
 
        die();
 
    }
$errors = array(
      'nume' => false, 
  );

  $values = array(
      'nume' => isset($_GET['nume']) ? $_GET['nume'] : "", 
  );
     
    if (isset($_POST['nume'])) {
  
      if (!isset($_POST['nume']) || empty($_POST['nume'])) {
          $errors['nume'] = true;
      }
  
  }
 
     
    $first_name = $_POST['nume'];
 
    $email_from = $_POST['email'];

    $telephone = $_POST['telefon'];

    $city = $_POST['localitate'];

    $comments = $_POST['detalii'];

    $date = $_POST['data'];

    $specializare = $_POST['specializare'];

    $medic = $_POST['medic']; // required

    $agreement= $_POST['agree']; // required
 
    $error_message = "";
 
    $email_exp = '/^[A-Za-z0-9._%-] @[A-Za-z0-9.-] \.[A-Za-z]{2,4}$/';
 
  if(!preg_match($email_exp,$email_from)) {
 
    $error_message .= 'The Email Address you entered does not appear to be valid.<br />';
 
  }
 
    $string_exp = "/^[A-Za-z .'-] $/";
 
  if(!preg_match($string_exp,$first_name)) {
 
    $error_message .= 'The First Name you entered does not appear to be valid.<br />';
 
  }
 
  if(strlen($error_message) > 0) {
 
    died($error_message);
 
  }
 
    $email_message = "<h2></h2>\n\n";
 
     
 
    function clean_string($string) {
 
      $bad = array("content-type","bcc:","to:","cc:","href");
 
      return str_replace($bad,"",$string);
 
    }
 
     
     
    $email_message .= "<br>Name: ".clean_string($first_name)."\n";
  
    $email_message .= "<br>Email: ".clean_string($email_from)."\n";
 
    $email_message .= "<br>Telephone: ".clean_string($telephone)."\n";

    $email_message .= "<br>City: ".clean_string($city)."\n";
 
    $email_message .= "<br>Comments: ".clean_string($comments)."\n";

    $email_message .= "<br>Date: ".clean_string($date)."\n";

    $email_message .= "<br>Speciality: ".clean_string($specializare)."\n";

    $email_message .= "<br>Medic: ".clean_string($medic)."\n";

    $email_message .= "<br><h3>Contact him now!</h3>";

   
 

 
     
 
// create email headers
 
$headers = "From: [email protected]\r\n".
 
"Content-type:text/html;charset=UTF-8" . "\r\n" .

'X-Mailer: PHP/' . phpversion();


 
@mail($email_to, $email_subject, $email_message, $headers);  

 
?>
<html lang="en">
<head>  
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400|Montserrat:700' rel='stylesheet' type='text/css'>
    <style>
        @import url(//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css);
        @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
    </style>
    <script src="https://2-22-4-dot-lead-pages.appspot.com/static/lp918/min/jquery-1.9.1.min.js"></script>
    <script src="https://2-22-4-dot-lead-pages.appspot.com/static/lp918/min/html5shiv.js"></script>
</head>
<body>
    <header  id="header">
        <h1  data-lead-id="site-header-title">SUCCES!</h1>
    </header>

    <div >
        <i  id="checkmark"></i>
        <p  data-lead-id="main-content-body"></p>
    </div>
</body>
</html> 
<?php
 
}
 
?>
<?php
    include ('inc/page_footer.php');
?>

<?php
    get_footer();
?>

<form method="POST" id="contactForm" novalidate  action="/form">
          <fieldset>
            <legend><span >1</span> Informatii Personale</legend>
            <div >
              <div >
                <input type="text"  name="nume" id="nume" placeholder="Nume Prenume *" required="" data-error="Completati numele dvs.">
                <div ></div>
              </div>
              
            </div>
            <div >
              <div >
                <input type="email"  name="email" id="email" placeholder="Email *" required="" data-error="Tastati o adresa de email valida">
                <span >* <?php echo $email_error;?></span>
              </div>
              <div >
                <input type="text"  id="telefon" name="telefon" placeholder="Telefon *" required="" data-error="Tastati numarul corect de telefon">
                <div ></div>
              </div>
            </div>
            <div >
              <div >
                <input type="text"  id="localitate" name="localitate" placeholder="Localitatea *" required="" data-error="Completati localitatea dvs.">
                <div ></div>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend><span >2</span> Ce va supara?</legend>
            <div >
              <div >
                <textarea name="detalii" id="detalii"  placeholder="detaliati aici ce va supara ....." required="" data-error="completati simtomatologia"></textarea>
                <div ></div>
              </div>
            </div>
            <div >

              <div >
                <label for="data">Cand doresti programarea?</label>
                <input  type="date" name="data" id="data" required="" data-error="Completati data">
                
              </div>
              <div >
                <label for="specializare">Specializare:</label>
                <select id="specializare"  name="specializare" required="" data-error="Selectati o optiune">
                  <option value="" selected="" disabled="">Selecteaza</option>
                  <?php if( have_rows('specializare') ): ?>
<?php while( have_rows('specializare') ): the_row();

$medic = get_sub_field('medic');
?>
                  <option value="<?php echo $medic;?>"><?php echo $medic;?></option>
                  <?php endwhile; ?>
<?php endif; ?>
                </select>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <div >
              <div >
                <legend><span >3</span>Medic</legend>
                <div >
                <select id="medic" name="medic"  required="" data-error="Selectati medic">
                  <option value="" selected="" disabled="">Selecteaza medic</option>
                  <?php if( have_rows('formular') ): ?>
<?php while( have_rows('formular') ): the_row();

$medic = get_sub_field('medic');
?>
                  <option value="<?php echo $medic;?>"><?php echo $medic;?></option>
                  <?php endwhile; ?>
<?php endif; ?>
                </select>
                </div>
                 <div  id="medicf" style="display:none">
                <select id="medic" name="medic"  required="" data-error="Alege medicul">
                  <option value="" selected="" disabled="">Alege medicul</option>
                </select>
                </div>
                <div ></div>
              </div>
            </div>
          </fieldset>
          <div >
            <div >
              <label >
                <input type="checkbox" name="agree" id="agree" required="" data-error="Bifeaza">
                Am citit si sunt de acord cu <a href="https://profmunteanu.ro/politica-cookie-uri-ue/" >Termeni si Conditii si Politica GDPR</a> </label>
                <button type="submit" name="submit" id="submit"  style="    border-radius: 8px; background: #5CDB94; pointer-events: all; cursor: pointer;">Trimite solicitarea</button> 
              <div ></div>   
            </div>
          </div>
        </form>

CodePudding user response：

Very simple! First prevent default action of submit button then validate and finally trigger submit.

Use this after the end tag

<script>

    $(document).ready(()=>{
      $("#contactForm").submit(function (e) { 
         //e.preventDefault(); //uncomment if form still submits 
         //e.stopImmediatePropagation(); //uncomment if form still submits 
         //now validate fields
         if($('#nume').val().lenght < 3){ 
           $('#nume').next().text('name is too short'); 
           return false; 
         }else if($('#email').val().length < 5 && !$('#email').val().includes('@')){ 
           $('#email').next().text('invalid email');
           return false;
         }
         //else if....
         else{
           //$("#contactForm").submit();
           //or 
           return true;
         }
      });
    });

</script>

Note : This is untested code.