1

required attribute doesn't work on my form. What am I doing wrong?

Here is my code in HTML: 

<form id="main-contact-form" method="POST">
    <fieldset class="form-group">
      <input id="name" placeholder="Nome" class="form-control" type="text" tabindex="1" required /></fieldset>
    <fieldset class="form-group">
      <input id="email" placeholder="E-mail" class="form-control" type="email" tabindex="2" required /></fieldset>
    <fieldset class="form-group">
      <input id="phone" placeholder="Numero di telefono" class="form-control" type="tel" tabindex="3" required /></fieldset>
    <fieldset class="form-group">
      <textarea id="message" class="form-control" rows="8" placeholder="Scrivi un messaggio.." tabindex="5" required /></textarea></fieldset>
    <fieldset>
      <button name="submit" class="btn btn-primary" id="submitBtn">Invia Messaggio</button>
    </fieldset>
</form>
<div id="feedback"></div>

Here is the php code in the head tag: 

<script>
$(document).ready(function(){

    $( "#submitBtn" ).click(function( event ) {

        //values
        var name=document.getElementById('name').value;
        var email=document.getElementById('email').value;
        var phone=document.getElementById('phone').value;
        var message=document.getElementById('message').value;
        var dataString = {"name": name, "email":email, "phone": phone, "message":message}

        $.ajax({
            type:"post",
            url:"submitForm.php",
            data: dataString,
            success: function(html) {
                $('#feedback').html(html);
            }
        });
      event.preventDefault();
    });
});
</script>
Alessio Montini
  • 11
  • 3
  • 1
    I dont know what do you mean by doesn't work ..... it works for me https://jsfiddle.net/uno1ftff/ when I click Invia Messaggio it shows msg – MyTwoCents Sep 03 '17 at 13:49
  • I don't think there's anything here to prevent the attribute from working, though solely relying on the `required` attribute isn't recommended. Maybe try explicitly setting the attribute as `required="required"` instead of minimizing it. – Drew Kennedy Sep 03 '17 at 13:51
  • 1
    [Is your document declared to be HTML 5?](https://stackoverflow.com/questions/17966390/html5-required-attribute-seems-not-working#comment26260924_17966390) – GSerg Sep 03 '17 at 13:52
  • yes, it is @GSerg – Alessio Montini Sep 03 '17 at 13:59
  • @Ashish451 the form work, but the required message does not appear, and process the request with empty fields – Alessio Montini Sep 03 '17 at 14:06
  • I am able to see msg Please fill this field in fiddle which I have attached... In chrome and firefox it shows – MyTwoCents Sep 03 '17 at 14:07

0 Answers0