0

I use the following code to check if all form fields are not empty before the submit button is activated.

<script type="text/javascript">
            function checkForm() {
                var cansubmit = false;
                $('form input[type="text"]').each(function (index, element) {
                    if (element.value == "") {
                        cansubmit = true;
                    }
                });
                document.getElementById("uploadButton").disabled = cansubmit;
            }
        </script>

How can I edit this code so it checks if the email field contains an email address before the submit button is activated?

UPDATE

I changed the code to this and it seems to work. It checks if it contains @ (and not as the first symbol) and . (and not as the third symbol).

Is this a logical code or should it be easier?

<script type="text/javascript">
            function checkForm() {
                var cansubmit = false;
                $('form input[type="text"]').each(function (index, element) {
                    if (element.value == "") {
                        cansubmit = true;
                    }
                });
                $('form input[type="email"]').each(function (index, element) {
                    if (element.value.indexOf("@") <= 0) {
                        cansubmit = true;
                    }
                    else if (element.value.indexOf(".") <= 2) {
                        cansubmit = true;
                    }
                });
                document.getElementById("uploadButton").disabled = cansubmit;
            }
        </script>

2 Answers2

0

You can use a regex from this answer to validate email address:

if ((element.value == "" && element.type != "email") || (element.type == "email" && !/([!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|"([]!#-[^-~ \t]|(\\[\t -~]))+")@([0-9A-Za-z]([0-9A-Za-z-]{0,61}[0-9A-Za-z])?(\.[0-9A-Za-z]([0-9A-Za-z-]{0,61}[0-9A-Za-z])?)*|\[((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|IPv6:((((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){6}|::((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){5}|[0-9A-Fa-f]{0,4}::((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){4}|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):)?(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?::((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){3}|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){0,2}(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?::((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){2}|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){0,3}(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?::(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){0,4}(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?::)((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3})|(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3})|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){0,5}(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?::(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3})|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){0,6}(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?::)|(?!IPv6:)[0-9A-Za-z-]*[0-9A-Za-z]:[!-Z^-~]+)])/.test(element.value))) {
vanowm
  • 9,466
  • 2
  • 21
  • 37
  • See my updated answer which seems to work. Is this a logical code or should it be easier? –  May 23 '22 at 10:24
  • FYI the regex provided does **ABSOLUTELY NOT** validate an email address. It just validates a very strict subset of email addresses, for example the following *valid* email addresses are rejected: `my+email@example.com`, `email(comment)@example.com`, `".John..Doe"@example.com`, `#email@example.com`, moreover it also prevents the use of long gTLDs so `john.doe@example.company` fails because `company` is not 2-3 characters long. – GACy20 May 23 '22 at 10:32
0

Use a combination of <input type="email"> and inputElement.validity to check if the input is valid. Docs

AdamRaichu
  • 149
  • 1
  • 13