{"id":8573,"date":"2022-09-14T10:24:40","date_gmt":"2022-09-14T04:54:40","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/"},"modified":"2022-09-14T10:24:40","modified_gmt":"2022-09-14T04:54:40","slug":"solved-validating-multiple-form-fields-with-javascript-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/","title":{"rendered":"[Solved] Validating multiple form fields with JavaScript [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

I don’t know where to start from, but if you need your own validation you should remove required<\/code> attribute from the inputs because FF for example will check the form instead of your validation function.<\/p>\n

Executing event.preventDefault(); what do you think you have in event<\/code>?<\/p>\n

Properlly you should pass it when calling the function on submit and supply an argument in the function definition<\/p>\n

onSubmit=\"validateForm(event);\"\n<\/code><\/pre>\n
and function definition should be:<\/p>\n
function validateForm(event) {\n  ... \n  so you can do event.preventDefault()\n  ...\n}\n<\/code><\/pre>\n
You may have other problems too, but at least you will get the validation function executed and you;ll have event in it <\/p>\n
COMPLETE EXAMPLE ADDED:<\/p>\n
<script>\n\nfunction validateForm(event) {\n\n    var phone = document.getElementById(\"phonenumber\").value,\n    email = document.getElementById(\"email\").value,\n    name = document.getElementById(\"name\").value,\n    address = document.getElementById(\"address\").value,\n    tomatch = \/^\\d{3}-\\d{3}-\\d{4}$\/,\n    emailMatch = \/^\\[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[A-Z]{2,4}$\/,\n    errors = [];\n\n    if (!phone){\n      errors.push(\"The Phone Number is required.\");\n    } else if (!tomatch.test(phone)){\n      errors.push(\"The phone number must be formated as follows: XXX-XXX-XXXX.\");\n    }\n\n    if (!name){\n      errors.push(\"The Name is required\");\n    }\n\n    if (!email){\n      errors.push(\"The email is required.\");\n    } else if (!emailMatch.test(email)){\n      errors.push(\"The email must be formated as follows: name@domain.com.\");\n    }\n\n    if (!address){\n      errors.push(\"The Address is required.\");\n    }\n\n    if (errors.length) {\n      event.preventDefault();\n      alert(errors.join(\"\\n\"));\n    }\n\n}\n<\/script>\n\n<form enctype=\"multipart\/form-data\" action=\"assets\/mailer.php\" method=\"POST\" id=\"form1\" onSubmit=\"validateForm(event)\">\n <label for=\"Name\">Name:<\/label><br \/>\n <input size=\"100%\" type=\"text\" name=\"name\" id=\"name\"><br>\n <label for=\"Email\">E-mail:<\/label><br \/>\n <input size=\"100%\" type=\"text\" name=\"email\" id=\"email\" value=\"\"><br \/>\n <label for=\"Phone\">Phone Number:<\/label><br \/>\n <input size=\"100%\" type=\"text\" name=\"phonenumber\" id=\"phonenumber\" value=\"\"><br \/>\n <label for=\"Address\">Shipping Address:<\/label><br \/>\n <input size=\"100%\" type=\"text\" name=\"address\" id=\"address\" value=\"\"><br \/>\n\n <label for=\"comment\">Input Comments\/Questions:<\/label><br \/>\n <input size=\"100%\" type=\"text\" name=\"comment\" value=\"\"><br><br>\n  Please choose a file: <br \/>\n <input name=\"uploaded\" type=\"file\" \/><br \/>\n <br \/>\n\n <input size=\"100%\" type=\"submit\" value=\"Submit\" \/><br \/>\n <input size=\"100%\" type=\"reset\" value=\"Reset\">\n<\/form>\n<\/code><\/pre>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            8<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Validating multiple form fields with JavaScript [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] I don’t know where to start from, but if you need your own validation you should remove required attribute from the inputs because FF for example will check the form instead of your validation function. Executing event.preventDefault(); what do you think you have in event? Properlly you should pass it when calling the function … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[346,333],"class_list":["post-8573","post","type-post","status-publish","format-standard","hentry","category-solved","tag-html","tag-javascript"],"yoast_head":"\n[Solved] Validating multiple form fields with JavaScript [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Validating multiple form fields with JavaScript [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] I don’t know where to start from, but if you need your own validation you should remove required attribute from the inputs because FF for example will check the form instead of your validation function. Executing event.preventDefault(); what do you think you have in event? Properlly you should pass it when calling the function ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-14T04:54:40+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Validating multiple form fields with JavaScript [closed]\",\"datePublished\":\"2022-09-14T04:54:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/\"},\"wordCount\":113,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"html\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/\",\"name\":\"[Solved] Validating multiple form fields with JavaScript [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-09-14T04:54:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Validating multiple form fields with JavaScript [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Validating multiple form fields with JavaScript [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Validating multiple form fields with JavaScript [closed] - JassWeb","og_description":"[ad_1] I don’t know where to start from, but if you need your own validation you should remove required attribute from the inputs because FF for example will check the form instead of your validation function. Executing event.preventDefault(); what do you think you have in event? Properlly you should pass it when calling the function ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/","og_site_name":"JassWeb","article_published_time":"2022-09-14T04:54:40+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Validating multiple form fields with JavaScript [closed]","datePublished":"2022-09-14T04:54:40+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/"},"wordCount":113,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["html","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/","name":"[Solved] Validating multiple form fields with JavaScript [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-14T04:54:40+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-validating-multiple-form-fields-with-javascript-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Validating multiple form fields with JavaScript [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/8573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=8573"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/8573\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=8573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=8573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=8573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}