{"_id":"5632a5ec49e16d0d001224c6","project":"55b933b3146ef121002158d3","category":{"_id":"5632a5e749e16d0d00122444","pages":["5632a5ec49e16d0d001224bd","5632a5ec49e16d0d001224be","5632a5ec49e16d0d001224bf","5632a5ec49e16d0d001224c0","5632a5ec49e16d0d001224c1","5632a5ec49e16d0d001224c2","5632a5ec49e16d0d001224c3","5632a5ec49e16d0d001224c4","5632a5ec49e16d0d001224c5","5632a5ec49e16d0d001224c6","5632a5ec49e16d0d001224c7","5632a5ec49e16d0d001224c8","5632a5ec49e16d0d001224c9","5632a5ec49e16d0d001224ca","5632a5ec49e16d0d001224cb","5633bab59c607719001b86a1","5633bcbac49a7c19001fd0a6","5633befcc49a7c19001fd0a9","5633c585b904a10d0032f864","5633d7547b56ae0d0025a062","5633d7e87b56ae0d0025a066","5633d85435355017003ca3c8","5633da507e9e880d00af1a28","5633daa3fa71f30d00ba74ab","5633e1f87e9e880d00af1a3f","5633e323fa71f30d00ba74b9","5633e3aa7b56ae0d0025a072","5633e4c6737ea01700ea3276"],"project":"55b933b3146ef121002158d3","version":"5632a5e549e16d0d00122443","__v":14,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-07-31T23:12:47.262Z","from_sync":false,"order":0,"slug":"epayment-form","title":"ePayment Form"},"__v":0,"githubsync":"","user":"55b932ba8fd1a02b00f496c8","version":{"_id":"5632a5e549e16d0d00122443","__v":6,"project":"55b933b3146ef121002158d3","createdAt":"2015-10-29T23:04:05.701Z","releaseDate":"2015-10-29T23:04:05.701Z","categories":["5632a5e749e16d0d00122444","5632a5e749e16d0d00122445","5632a5e749e16d0d00122446","5632a5e749e16d0d00122447","5632a5e749e16d0d00122448","5632a5e749e16d0d00122449","5632a5e749e16d0d0012244a","5632a5e749e16d0d0012244b","5632a5e749e16d0d0012244c","5632a5e749e16d0d0012244d","5632a5e749e16d0d0012244e","5632a5e749e16d0d0012244f","5632a5e749e16d0d00122450","5632b179df556c0d00cd095b","564e13053b2b4a19000cd69b","59caa9df65accc001a489c95","59cab50965accc001a489d28","59cadd464ab7b70024378e74"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1"},"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-08-03T18:35:13.623Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":9,"body":"This code uses Javascript to make fields required. It is similar to [Required Field prompts](/docs/required-field-prompts) except that it indicates which fields are required when the customer lands on the payment form. Another difference is that after it validates the form, it provides inline instructions for the customer as opposed to instructions in an alert box. It has the same advantage [Required Field prompts](/docs/required-field-prompts) has as opposed to use of source key settings because it keeps the customer on the same page if the required fields are blank. Some web browsers will erase all form data if the customer uses the back page to return to the form.\n\n1. Log into your eBizCharge merchant gateway. Go to “Settings”, then “Source Keys”. Select the source key you are using and click “Edit”. Click “Edit Customization to Epay Form”.\n2. Insert this code into the document head:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n\\nfunction verify() \\n\\n{\\n\\nvar themessage = \\\"Please complete the following fields: \\\";\\n\\nthemessage = themessage + \\\"<ul>\\\";\\n\\nif (document.epayform.UMname.value==\\\"\\\") {\\n\\nthemessage = themessage + \\\"<li>Cardholder Name</li>\\\";\\n\\n}\\n\\nif (document.epayform.UMcard.value==\\\"\\\") {\\n\\nthemessage = themessage + \\\"<li> Card Number</li>\\\";\\n\\n}\\n\\nif (document.epayform.UMexpir.value==\\\"\\\") {\\n\\nthemessage = themessage + \\\"<li> Card Expiration Date</li>\\\";\\n\\n}\\n\\nthemessage = themessage + \\\"</ul>\\\";\\n\\n//alert if fields are empty and cancel form submit\\n\\nif (themessage == \\\"Please complete the following fields: <ul></ul>\\\") {\\n\\ndocument.epayform.submit();\\n\\nreturn true;\\n\\n}\\n\\nelse {\\n\\ndocument.getElementById('required').innerHTML = \\\"<font color=\\\\\\\"#FF0000\\\\\\\">\\\" + themessage + \\\"</font>\\\";\\n\\nreturn false;\\n\\n }\\n\\n}\\n\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n3. You can make as many fields required as you want. To make a field required, repeat this section of code:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"if (document.epayform.UMfield.value==\\\"\\\") {\\nthemessage = themessage + \\\"<li> Name of Field</li>\\\";\\n}\",\n      \"language\": \"csharp\"\n    }\n  ]\n}\n[/block]\n4. Create inline instructions\n\n        1. Find\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tr><\\n   <td bgcolor=\\\"#F0F0F0\\\" width=\\\"692\\\" colspan=\\\"2\\\">&nbsp;</td>\\n</tr>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n       2. Replace it with\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tr>\\n  <td bgcolor=\\\"#F0F0F0\\\" width=\\\"692\\\" colspan=\\\"2\\\" align=\\\"center\\\">\\n     <table>\\n    <tr>\\n   <td>\\n   <div id=\\\"required\\\"><font size=\\\"2\\\" face=\\\"Verdana\\\" color=\\\"#ff0000\\\">*</font><font size=\\\"2\\\" face=\\\"Verdana\\\"> indicates a required field.</font></div>&nbsp;\\n   </td>\\n   </tr>\\n   </table>\\n  </td>\\n</tr>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nCreate red *s\n\n           1. Find\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<td bgcolor=\\\"#F0F0F0\\\" width=\\\"450\\\">\\n<input type=\\\"text\\\" name=\\\"UMname\\\" size=\\\"25\\\" value=\\\"[UMname]\\\"></td>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n1. Replace it with\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<td bgcolor=\\\"#F0F0F0\\\" width=\\\"450\\\">\\n<input type=\\\"text\\\" name=\\\"UMname\\\" size=\\\"25\\\" value=\\\"[UMname]\\\"> <font face=\\\"Verdana\\\" size=\\\"2\\\"color=\\\"#ff0000\\\">*</font></td>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n1. Find\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tr>\\n   <td bgcolor=\\\"#F0F0F0\\\" width=\\\"234\\\" align=\\\"right\\\"><font face=\\\"Verdana\\\" size=\\\"2\\\">Card Number:</font></td>\\n   <td bgcolor=\\\"#F0F0F0\\\" width=\\\"450\\\">\\n   <input type=\\\"text\\\" name=\\\"UMcard\\\" size=\\\"17\\\"></td>\\n</tr>\\n<tr>\\n   <td bgcolor=\\\"#F0F0F0\\\" width=\\\"234\\\" align=\\\"right\\\"><font face=\\\"Verdana\\\" size=\\\"2\\\">Card Expiration Date: </font></td>\\n   <td bgcolor=\\\"#F0F0F0\\\" width=\\\"450\\\">\\n   <input type=\\\"text\\\" name=\\\"UMexpir\\\" size=\\\"4\\\"> MMYY</td>\\n</tr>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n1. Replace it with\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tr>\\n   <td bgcolor=\\\"#F0F0F0\\\" width=\\\"234\\\" align=\\\"right\\\"><font face=\\\"Verdana\\\" size=\\\"2\\\">Card Number:</font></td>\\n   <td bgcolor=\\\"#F0F0F0\\\" width=\\\"450\\\">\\n   <input type=\\\"text\\\" name=\\\"UMcard\\\" size=\\\"17\\\"> <font face=\\\"Verdana\\\" size=\\\"2\\\"color=\\\"#ff0000\\\">*</font></td>\\n</tr>\\n<tr>\\n   <td bgcolor=\\\"#F0F0F0\\\" width=\\\"234\\\" align=\\\"right\\\"><font face=\\\"Verdana\\\" size=\\\"2\\\">Card Expiration Date: </font></td>\\n   <td bgcolor=\\\"#F0F0F0\\\" width=\\\"450\\\">\\n   <input type=\\\"text\\\" name=\\\"UMexpir\\\" size=\\\"4\\\"> MMYY <font face=\\\"Verdana\\\" size=\\\"2\\\"color=\\\"#ff0000\\\">*</font></td>\\n</tr>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n1. For every additional field, find\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<input type=\\\"text\\\" name=\\\"UMfield\\\" size=\\\"x\\\" value=\\\"[UMfield]\\\">\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n2. Replace it with\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<input type=\\\"text\\\" name=\\\"UMfield\\\" size=\\\"x\\\" value=\\\"[UMfield]\\\"> <font face=\\\"Verdana\\\" size=\\\"2\\\"color=\\\"#ff0000\\\">*</font>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nModify submit button\n         1. Find\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<input type=\\\"submit\\\" name=\\\"submitbutton\\\" value=\\\"Process Payment &gt;&gt;\\\">\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n2. Replace it with\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<input type=\\\"submit\\\" name=\\\"submitbutton\\\" value=\\\"Process Payment &gt;&gt;\\\" onclick=\\\"return verify();\\\">\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"required-fields-with-javascript","type":"basic","title":"Required Fields with Javascript"}

Required Fields with Javascript


This code uses Javascript to make fields required. It is similar to [Required Field prompts](/docs/required-field-prompts) except that it indicates which fields are required when the customer lands on the payment form. Another difference is that after it validates the form, it provides inline instructions for the customer as opposed to instructions in an alert box. It has the same advantage [Required Field prompts](/docs/required-field-prompts) has as opposed to use of source key settings because it keeps the customer on the same page if the required fields are blank. Some web browsers will erase all form data if the customer uses the back page to return to the form. 1. Log into your eBizCharge merchant gateway. Go to “Settings”, then “Source Keys”. Select the source key you are using and click “Edit”. Click “Edit Customization to Epay Form”. 2. Insert this code into the document head: [block:code] { "codes": [ { "code": "<script>\n\nfunction verify() \n\n{\n\nvar themessage = \"Please complete the following fields: \";\n\nthemessage = themessage + \"<ul>\";\n\nif (document.epayform.UMname.value==\"\") {\n\nthemessage = themessage + \"<li>Cardholder Name</li>\";\n\n}\n\nif (document.epayform.UMcard.value==\"\") {\n\nthemessage = themessage + \"<li> Card Number</li>\";\n\n}\n\nif (document.epayform.UMexpir.value==\"\") {\n\nthemessage = themessage + \"<li> Card Expiration Date</li>\";\n\n}\n\nthemessage = themessage + \"</ul>\";\n\n//alert if fields are empty and cancel form submit\n\nif (themessage == \"Please complete the following fields: <ul></ul>\") {\n\ndocument.epayform.submit();\n\nreturn true;\n\n}\n\nelse {\n\ndocument.getElementById('required').innerHTML = \"<font color=\\\"#FF0000\\\">\" + themessage + \"</font>\";\n\nreturn false;\n\n }\n\n}\n\n</script>", "language": "javascript" } ] } [/block] 3. You can make as many fields required as you want. To make a field required, repeat this section of code: [block:code] { "codes": [ { "code": "if (document.epayform.UMfield.value==\"\") {\nthemessage = themessage + \"<li> Name of Field</li>\";\n}", "language": "csharp" } ] } [/block] 4. Create inline instructions 1. Find [block:code] { "codes": [ { "code": "<tr><\n <td bgcolor=\"#F0F0F0\" width=\"692\" colspan=\"2\">&nbsp;</td>\n</tr>", "language": "html" } ] } [/block] 2. Replace it with [block:code] { "codes": [ { "code": "<tr>\n <td bgcolor=\"#F0F0F0\" width=\"692\" colspan=\"2\" align=\"center\">\n <table>\n <tr>\n <td>\n <div id=\"required\"><font size=\"2\" face=\"Verdana\" color=\"#ff0000\">*</font><font size=\"2\" face=\"Verdana\"> indicates a required field.</font></div>&nbsp;\n </td>\n </tr>\n </table>\n </td>\n</tr>", "language": "html" } ] } [/block] Create red *s 1. Find [block:code] { "codes": [ { "code": "<td bgcolor=\"#F0F0F0\" width=\"450\">\n<input type=\"text\" name=\"UMname\" size=\"25\" value=\"[UMname]\"></td>", "language": "html" } ] } [/block] 1. Replace it with [block:code] { "codes": [ { "code": "<td bgcolor=\"#F0F0F0\" width=\"450\">\n<input type=\"text\" name=\"UMname\" size=\"25\" value=\"[UMname]\"> <font face=\"Verdana\" size=\"2\"color=\"#ff0000\">*</font></td>", "language": "html" } ] } [/block] 1. Find [block:code] { "codes": [ { "code": "<tr>\n <td bgcolor=\"#F0F0F0\" width=\"234\" align=\"right\"><font face=\"Verdana\" size=\"2\">Card Number:</font></td>\n <td bgcolor=\"#F0F0F0\" width=\"450\">\n <input type=\"text\" name=\"UMcard\" size=\"17\"></td>\n</tr>\n<tr>\n <td bgcolor=\"#F0F0F0\" width=\"234\" align=\"right\"><font face=\"Verdana\" size=\"2\">Card Expiration Date: </font></td>\n <td bgcolor=\"#F0F0F0\" width=\"450\">\n <input type=\"text\" name=\"UMexpir\" size=\"4\"> MMYY</td>\n</tr>", "language": "html" } ] } [/block] 1. Replace it with [block:code] { "codes": [ { "code": "<tr>\n <td bgcolor=\"#F0F0F0\" width=\"234\" align=\"right\"><font face=\"Verdana\" size=\"2\">Card Number:</font></td>\n <td bgcolor=\"#F0F0F0\" width=\"450\">\n <input type=\"text\" name=\"UMcard\" size=\"17\"> <font face=\"Verdana\" size=\"2\"color=\"#ff0000\">*</font></td>\n</tr>\n<tr>\n <td bgcolor=\"#F0F0F0\" width=\"234\" align=\"right\"><font face=\"Verdana\" size=\"2\">Card Expiration Date: </font></td>\n <td bgcolor=\"#F0F0F0\" width=\"450\">\n <input type=\"text\" name=\"UMexpir\" size=\"4\"> MMYY <font face=\"Verdana\" size=\"2\"color=\"#ff0000\">*</font></td>\n</tr>", "language": "html" } ] } [/block] 1. For every additional field, find [block:code] { "codes": [ { "code": "<input type=\"text\" name=\"UMfield\" size=\"x\" value=\"[UMfield]\">", "language": "html" } ] } [/block] 2. Replace it with [block:code] { "codes": [ { "code": "<input type=\"text\" name=\"UMfield\" size=\"x\" value=\"[UMfield]\"> <font face=\"Verdana\" size=\"2\"color=\"#ff0000\">*</font>", "language": "html" } ] } [/block] Modify submit button 1. Find [block:code] { "codes": [ { "code": "<input type=\"submit\" name=\"submitbutton\" value=\"Process Payment &gt;&gt;\">", "language": "html" } ] } [/block] 2. Replace it with [block:code] { "codes": [ { "code": "<input type=\"submit\" name=\"submitbutton\" value=\"Process Payment &gt;&gt;\" onclick=\"return verify();\">", "language": "html" } ] } [/block]