0

I have big trouble with a multi step form I did by myself using jquery (hide, and display divs)

here is how it looks like

enter image description here

the trouble I have is for the fields that have the attribute "required". In fact All the form works fine, but the trouble is that it does not display the required until I click to the sublit button.

And when we are to the final page and we do submit, it recall that some inputs are missings, here is below the message error in the console of chrome

An invalid form control with name='raison_sociale' is not focusable. index.php?p=demande-devis&categorie=professionnel&type=menuiserie:1
An invalid form control with name='nom' is not focusable. index.php?p=demande-devis&categorie=professionnel&type=menuiserie:1
An invalid form control with name='siret' is not focusable. index.php?p=demande-devis&categorie=professionnel&type=menuiserie:1
An invalid form control with name='prenom' is not focusable. index.php?p=demande-devis&categorie=professionnel&type=menuiserie:1
An invalid form control with name='no_tva' is not focusable.

I don't know how to check the required attributes without validating the form, but just before changing the step of my form...

anykind of help will be much appreciated.

Stanislas Piotrowski
  • 2,595
  • 10
  • 40
  • 59
  • Please post your code, is better if you create a jsFiddler – Fabio Oct 24 '14 at 08:57
  • I can't do it, but I have a link to my form http://www.sp-batiment.com/index.php?p=demande-devis&categorie=professionnel&type=travaux – Stanislas Piotrowski Oct 24 '14 at 08:58
  • the thing is that id display only the last required input, If I do have required inputs on the first step, it becomes, not required. I mean, the form don't care if it is required or not. and it can be validated – Stanislas Piotrowski Oct 24 '14 at 08:59

1 Answers1

1

you can force form validation before you go next step

e.g.

 if($("form")[0].checkValidity())
 {
   //Go to next step
 }

How to force a html5 form validation without submitting it via jQuery

the error there are because the control is not visible

An invalid form control with name='raison_sociale'

means that input field is not visible, in fact 

$("[name='raison_sociale']").is(":visible")

is false in the last step

I hope to be helpful

Community
  • 1
  • 1
Fabio
  • 1,890
  • 1
  • 15
  • 19