All geek questions in one place

Javascript validate @sign in text area

I am trying to complete a task and cannot get the code to verify. The problem is that I need an email text field in the form to check if "@" is present, but also in the same form I need to check if the name text box is empty or not. I can get one of them to work right away.

This is my coding.

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Weclome to the Recipe Collection Website</title> <script> function validateForm() { var x=document.forms["myForm"]["name"].value; if (x==null || x=="") { alert("Name text box must be filled out"); return false; } </script> <script> function checkEmail() { var y=document.forms["myForm"]["email"].value; var atpos=y.indexOf("@"); var dotpos=y.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=y.length) { alert("Not a valid e-mail address"); return false; } } </script> </head> <body> <form name="myForm" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="name"><br> Email: <input type="text" name="email"><br> Number of recipes previously submitted: <input type="radio" name="recipes" value="0">0<br> <input type="radio" name="recipes" value="1-2">1-2<br> <input type="radio" name="recipes" value="3-4">3-4<br> <input type="radio" name="recipes" value="5+">5+<br> Have you ever submitted recipes to another site?: <input type="radio" name="othersite" value="yes">Yes<br> <input type="radio" name="othersite" value="no" checked>No<br> <input type="submit" value="Submit"> </form> </body> </html>

Does it go?

Thanks for any help.

+4
source share
2 answers

JsFiddle demo work

The main reason for your problem is that you return false from the validation methods, even if everything is ok.

First, the easy part combines two methods:

I would not do inline js, but stick to what you have ... just create a method that combines both functions:

 <script> function doBoth() { return validateForm() && checkEmail(); } <script> ... <form name="myForm" onsubmit="return doBoth()" method="post">

Secondly, fixing a short circuit problem

However, there is an error with your two methods, you implicitly return undefined from them. undefined is false, so doBoth will never get the second method. This is due to a short circuit . JS is lazy, therefore, if the first part of the && operator is false, JS stops and does not evaluate the second part, since now there is no way for the whole operator to be true.

The solution to this problem is to return true if everything is verified correctly.

Also, note that you are missing the closing parenthesis in validateForm

 <script> function validateForm() { var x=document.forms["myForm"]["name"].value; if (x==null || x=="") { alert("Name text box must be filled out"); return false; } // everything ok *this is a MUST to return* return true; } function checkEmail() { var y=document.forms["myForm"]["email"].value; var atpos=y.indexOf("@"); var dotpos=y.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=y.length) { alert("Not a valid e-mail address"); return false; } // everything ok *this is a MUST to return* return true; } </script>
+2
source

I know where you got it, try this

 <script type="text/javascript"> function validateForm() { var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") { alert("First name must be filled out"); return false; } var x=document.forms["myForm"]["email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) { alert("Not a valid e-mail address"); return false; } } </script>
+1
source

Source: https://habr.com/ru/post/1441481/

More articles:


All Articles