Question 91645 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How do I change the border color of empty fields and prevent a form from submitting? – Jquery

<?php

require("../konekcija/konekcija.php");
require("../modeli/korisnik.php");

session_start();
if(isset($_POST["button"])) {
    $email = $_POST["email"];
    $lozinka = $_POST["lozinka"];

    $korisnik = new Korisnik(1, "", "", $email, $lozinka);
    $odgovor = Korisnik::prijava($email, $konekcija);
    $rez = $odgovor->fetch_array(MYSQLI_ASSOC); 
    $lozinka = $rez["lozinka"] ?? " ";
    $korisnikID = $rez["korisnikID"] ?? " ";
    $greska = 0;

    if (!password_verify($_POST["lozinka"], $lozinka)) {
        $greska = 1;
    } else {
        $_SESSION["korisnik"] = $korisnikID;
        setcookie("korisnik", $korisnikID, time() + 60*60*60);
        header("Location: glavna.php");
        exit();
    }
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Manager - Prijava</title>
    <link href="../style/style.css" rel="stylesheet">
</head>
<body>
    <div id="contentreg">
        <div id = "logocontainer_reg">
            <a href="index.php" id="logolink"><img src="../slike/logo.svg" id="logo"></a>
        </div>

        <h2 id="crvena">Prijava</h2>
    
        <form class="container" method="post" action="" id="forma" enctype="multipart/form-data" novalidate>      
            <h3>Email*</h3>
            <input type="email" name="email" id="email" class="input" placeholder="Email" required>        
            <h3>Lozinka*</h3>
            <input type="password" name="lozinka" id="lozinka" class="input" placeholder="Šifra" required>   
            
            <div id="nepoklapajuse">
                <h4 class="crvena">Email adresa i lozinka se ne poklapaju - pokušaj opet</h4>
            </div>

            <div class="buttoncontainer">
                <button class="button" name="button" id="button" type="submit">Prijavi se</button>
            </div>

            <a href="registracija.php" class="reroute"><p>Nemaš nalog? Registruj se<p></a>
        </form>
    </div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://malsup.github.io/jquery.form.js"></script> 

<script>  
    function promeniFormu() {
            $("#forma").on("submit", function(){
                if($("#email").val() != null){
                    $("#forma").submit();
                } else {
                    event.preventDefault();
                    $("#email").css("border", "2px solid red");
                }
            })
        }
    promeniFormu();
</script>

</body>
</html>

I’m trying to stop the form from submitting (and reloading the page) if the email field is empty and for its border to become red. With the way I’ve written my code the page keeps refreshing without doing anything of course, because the required field don’t match to do a log-in. Can someone help me out with what I’m doing wrong?

Tags:

2

Answers


  1. 0 
    <script>  
function promeniFormu() {
        $("#forma").on("submit", function(){
            if($("#email").val() != null){
                $("#forma").submit();
            } else {
                    **evt.preventDefault();**
                    **$("#email").css('border-color', 'red');**
                    **window.history.back();**
                    **return false;**
    
            }
        })
    }
promeniFormu();

    You can use like that.

    Login or Signup to reply.
  2. 0

    You’re asking a client side question, you don’t need to post your sever side code…

    All you need to do is prevent the default submit event, do your validations, then use $.ajax or $.get or $.post to send the form data to the sever.

    The novalidate property tells the browser not to validate on submit, but the browser still maintains the validity property as the form is being filled out, so you can use that instead of trying to reinvent the wheel. There’s even an :invalid css pseudo-selector.

    Also, I see that you’re already doing it, but a good reminder: never trust the client, always validate server side.

    $('form').on('submit', function(e) {
  e.preventDefault(); //prevents submitting the form, which reloads the page by default
  
  if ($(this).find('input:invalid').length) {
    //code to notify user
  } else {
    //code to submit form
  }
});
    input:invalid{ border-color: #ee0000; }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="container" method="post" action="" id="forma" enctype="multipart/form-data" novalidate>      
  <h3>Email*</h3>
  <input type="email" name="email" id="email" class="input" placeholder="Email" required>        
  <h3>Lozinka*</h3>
  <input type="password" name="lozinka" id="lozinka" class="input" placeholder="Šifra" required>   
            
  <div id="nepoklapajuse">
    <h4 class="crvena">Email adresa i lozinka se ne poklapaju - pokušaj opet</h4>
  </div>

  <div class="buttoncontainer">
    <button class="button" name="button" id="button" type="submit">Prijavi se</button>
  </div>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search