[cdhr]

Zanima me koje sve načine koristite prikazati messages od formi?
Problem: User koristi krivi input, submita, stranica se refresha( php server side validacija), i user dobija poruke o neispravnom inputu.

Ovo je forma:

<form class="" action="" method="post" id="signup-form">
  <div class="title-box" id="title-box-signup">
    <h2>Sign Up</h2>
  </div>
  <div class="input-box" id="input-box-signup-user">
    <input type="text" name="username" value="" placeholder="Username">
  </div>
  <div class="input-box" id="input-box-signup-password">
    <input type="password" name="password" value="" placeholder="Password">
  </div>
  <div class="input-box" id="input-box-signup-email">
    <input type="email" name="email" value="" placeholder="Email">
  </div>
  <div class="form-action" id="form-action-signup">
    <button type="submit" name="submit" id="signup-submit">Sign Up</button>
  </div>
  <div class="form-content">
    <p>By clicking Sign Up, you agree to our Terms and Conditions and that you have read our Privacy Policy, including our Cookie Usage.<br><span>You can opt out at any time.</span></p>
  </div>
</form>

Želim postići pri submitu stranica se ne refresha, nego samo prikazuje poruke od forme.
Hvala na pomoći, koristim jquery library, može i vanilla js.

Više sam php orijentiran i pokušavam nešto tipa :

$('form').submit(function(event) {

    // get the form data before sending via ajax
    var formData = {
        'name'               : $('input[name=name]').val(),
        'number'             : $('input[name=number]').val(),
        'message'            : $('input[name=message]').val(),
        'contactSubmit'      : 1 
    };

    // send the form to your PHP file (using ajax, no page reload!!)
    $.ajax({
        type: 'POST', 
        url:  'file.php', // <<<< -------  complete with your php filename (watch paths!)
        data:  formData,  // the form data
        dataType: 'json', // how data will be returned from php
        encode: true
    })
    // JS (jQuery) will do the ajax job and we "will wait that promise be DONE"
    // only after that, we´ll continue
    .done(function(data) {
        if(data.success === true) {
           // show the message!!!
           $('#success').show();
        }
        else{
            // ups, something went wrong ...
            alert('Ups!, this is embarrasing, try again please!');
            } 
        });
    // this is a trick, to avoid the form submit as normal behaviour
    event.preventDefault();
});
    });

Ali bezuspiješno.
Hvala na pomoći
p.s.
Aplikacija koja se radi na laravel, ovo je signup.blade.php unutar components foldera.
Mislio sam bacit reserach na :
socket.io ali koristiti socket samo za form validaciju na kraju se ispostavilo kao vulnerability i overkill za tako nešto.