{"id":1357,"date":"2022-08-30T15:15:51","date_gmt":"2022-08-30T15:15:51","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/13\/javascript-validation-colorbox-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:15:51","modified_gmt":"2022-08-30T15:15:51","slug":"javascript-validation-colorbox-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/javascript-validation-colorbox-collection-of-common-programming-errors\/","title":{"rendered":"JavaScript Validation (Colorbox)-Collection of common programming errors"},"content":{"rendered":"<p>In my page I have three fields that is required to fill in. If they are filled in a small pop up opens for registration. However, right now I have it in JavaScript. If one or more filed is not filled in, it will give a message one after other. For example, field 1,2,3 are not filled in. It will tell in a message box, please fill in field 1, second pop up please fill in 2 field, and please fill in 3 field. And right after it opens the registration pop up. I want to prevent that, UNLESS all the fields are filled in. It SHOULD NOT open the pop up without fields being completed.<\/p>\n<p>Here&#8217;s the code:<\/p>\n<pre><code> \n\n$(document).ready(function() {\n\n\n$(\"#lightboxRegister\").colorbox({inline:true, width:\"50%\"});\n\n    $(\"#lightboxRegister\").click(function() {\n        if(document.getElementById(\"title-vis\").value ==\"\"){\n            alert(\"You need to enter a book title.\");\n            self.close();\n        }\n        if(document.getElementById(\"abstract-vis\").value ==\"\"){\n            alert(\"You need to enter a book abstract.\");\n            self.close();\n        }\n        if(document.getElementById(\"writtenby-vis\").value ==\"\"){\n            alert(\"You need to enter a pen name.\");\n            self.close();\n        }\n\n        document.getElementById(\"title\").value = document.getElementById(\"title-vis\").value;\n        document.getElementById(\"abstract\").value = document.getElementById(\"abstract-vis\").value;\n        document.getElementById(\"writtenby\").value = document.getElementById(\"writtenby-vis\").value;\n\n    });\n\n\n  });\n\n<\/code><\/pre>\n<p>I can&#8217;t get this pop up<\/p>\n<pre><code>$(\"#lightboxRegister\").colorbox({inline:true, width:\"50%\"});\n<\/code><\/pre>\n<p>to work inside the click function:<\/p>\n<pre><code> $(\"#lightboxRegister\").click(function()\n<\/code><\/pre>\n<p>I tried right after I close the message for third filed put this:<\/p>\n<pre><code>$(this).colorbox({inline:true, width:\"50%\"});\n<\/code><\/pre>\n<p>But I get the following error:<\/p>\n<blockquote>\n<p>Uncaught TypeError: Object # has no method &#8216;colorbox&#8217;<\/p>\n<\/blockquote>\n<p>Any help on how I can fix this?<\/p>\n<ol>\n<li>\n<pre><code>\n     REGISTER FORM \n\n\n\n<\/code><\/pre>\n<p>Here is jquery code:<\/p>\n<pre><code>$('#btn').click(function(){\n    $.colorbox({inline:true, width:\"50%\", href: '#lightboxRegister'});\n});\n<\/code><\/pre>\n<p>Demo: jsfiddle.net\/9QkmH\/<\/p>\n<\/li>\n<li>\n<p>to open colorbox on demand just use this:<\/p>\n<pre><code>$.colorbox({...});\n<\/code><\/pre>\n<p>for e.g.:<\/p>\n<pre><code>$('.myButton').click(function() {\n  alert('ok, lets open colorbox now!');\n  $.colorbox({href: 'myUrl.html', width: 500});\n});\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<p id=\"rop\"><small>Originally posted 2013-11-13 09:49:27. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>In my page I have three fields that is required to fill in. If they are filled in a small pop up opens for registration. However, right now I have it in JavaScript. If one or more filed is not filled in, it will give a message one after other. For example, field 1,2,3 are [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1357","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1357"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1357\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}