Good day!

there is such a form of input and verification e-mail

<body> <form> <p>Email: <input type="email" name="email" required></p> <p><input type="submit" value="Отправить"></p> </form> </body>

when you press Enter, the form shows that it is not filled correctly and checks if there is an @ symbol

there is a button to open a modal window

 <label class="btn" for="modal-2">Перейти к оплате</label>

task: to connect the button with the e-mail form that would have the same effect as when you press Enter, well, if everything is correct, the button went to the modal window

  • one
    Does the transfer to payment involve sending the form or only validation? - Talleyran
  • Only validation - Maxim
  • and the transition to the modal window - Maxim
  • Know how to fix the code? - Max
  • one
    where is the modal window? - L. Vadim

1 answer 1

1. In general, when a modal window is displayed by a script

 $('.btn').click(function(){ var myForm = $('#myForm'); if (myForm[0].checkValidity()) { alert("Я - модальное окно"); //тут должен быть ваш вызов модального окна } else { myForm[0].reportValidity(); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <form id="myForm"> <p>Email: <input type="email" name="email" required></p> <p><input type="submit" value="Отправить"></p> <label class="btn" for="modal-2">Перейти к оплате</label> </form> </body>

2. A special case of the author, when the modal window is displayed css through the state of the checkbox

We assign id to the form

 <form id="myForm">

On the button we write onclick

 <label for="modal-2" class="btn" onclick="check(this,'myForm'); return false">Перейти к оплате</label>

And before </body> insert the script:

 <script> function check(e, f) { event.preventDefault(); var modal = document.getElementById(e.getAttribute('for')); var form = document.getElementById(f); if (form.checkValidity()) { modal.checked = true; } else { myForm[0].reportValidity(); modal.checked = false; } } </script>
  • better tell me where to insert this code - Maxim
  • $ ('. btn'). click (function () {var myForm = $ ('# myForm'); if (myForm [0] .checkValidity ()) {alert ("I am a modal window");} else { myForm [0] .reportValidity ();}}); - Max
  • between some tags? or something else? - Max
  • @ Maxim is a sample code, instead of alert ("I am a modal window"); Your modal call should be. I do not know how you implemented it. - Talleyran
  • I don't understand the modal window - Maxim