[{"data":1,"prerenderedAt":970},["ShallowReactive",2],{"article:html5-textarea-validation-jquery-disallow-certain-words-330":3,"\u002Fblog\u002Fhtml5-textarea-validation-jquery-disallow-certain-words-330-surround":960},{"id":4,"title":5,"author":6,"body":7,"date":946,"description":947,"extension":948,"image":949,"meta":950,"minRead":63,"navigation":211,"path":951,"published":952,"seo":953,"stem":954,"tags":955,"__hash__":959},"blog\u002Fblog\u002Fhtml5-textarea-validation-jquery-disallow-certain-words-330.md","HTML5 TextArea Validation with jQuery to disallow certain words","Baljeet Singh",{"type":8,"value":9,"toc":944},"minimark",[10,14,20,532,932,935,940],[11,12,13],"p",{},"In this tutorial i will show to how to validate html5 textarea with jQuery. Here i will be focusing on how to restrict some words to be typed in to the textarea. If these words are found then the form will not submit.",[15,16,17],"blockquote",{},[11,18,19],{},"Reminder: Those of you who don't know, html5 pattern attribute doesn't work on textarea. Create two files index.html & script.js as shown below.",[21,22,28],"pre",{"className":23,"code":24,"filename":25,"language":26,"meta":27,"style":27},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!doctype html>\n\u003Chtml>\n  \u003Chead>\n    \u003Clink\n      rel=\"stylesheet\"\n      href=\"\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Fbootstrap\u002F3.2.0\u002Fcss\u002Fbootstrap.min.css\"\n    \u002F>\n    \u003Cscript src=\"\u002F\u002Fajax.googleapis.com\u002Fajax\u002Flibs\u002Fjquery\u002F1.11.1\u002Fjquery.min.js\">\u003C\u002Fscript>\n    \u003Cscript src=\"\u002F\u002Fajax.googleapis.com\u002Fajax\u002Flibs\u002Fjquery\u002F2.1.1\u002Fjquery.min.js\">\u003C\u002Fscript>\n    \u003Cscript src=\"script.js\">\u003C\u002Fscript>\n  \u003C\u002Fhead>\n\n  \u003Cbody>\n    \u003Cdiv class=\"container\">\n      \u003Cdiv class=\"form-group\">\n        \u003Cform action=\"\" method=\"get\" accept-charset=\"utf-8\">\n          \u003Ctextarea\n            class=\"form-control\"\n            name=\"the-new-com\"\n            id=\"the-new-com\"\n            cols=\"30\"\n            rows=\"10\"\n          >\u003C\u002Ftextarea>\n          \u003Cbr \u002F>\n          \u003Cinput\n            class=\"btn btn-success\"\n            type=\"submit\"\n            name=\"submit\"\n            id=\"submit\"\n          \u002F>\n        \u003C\u002Fform>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","index.html","html","",[29,30,31,51,61,72,81,100,115,121,148,172,196,206,213,223,245,266,309,318,333,348,362,377,392,403,414,422,436,451,464,477,483,493,503,513,522],"code",{"__ignoreMap":27},[32,33,36,40,44,48],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"sMK4o","\u003C!",[32,41,43],{"class":42},"swJcz","doctype",[32,45,47],{"class":46},"spNyl"," html",[32,49,50],{"class":38},">\n",[32,52,54,57,59],{"class":34,"line":53},2,[32,55,56],{"class":38},"\u003C",[32,58,26],{"class":42},[32,60,50],{"class":38},[32,62,64,67,70],{"class":34,"line":63},3,[32,65,66],{"class":38},"  \u003C",[32,68,69],{"class":42},"head",[32,71,50],{"class":38},[32,73,75,78],{"class":34,"line":74},4,[32,76,77],{"class":38},"    \u003C",[32,79,80],{"class":42},"link\n",[32,82,84,87,90,93,97],{"class":34,"line":83},5,[32,85,86],{"class":46},"      rel",[32,88,89],{"class":38},"=",[32,91,92],{"class":38},"\"",[32,94,96],{"class":95},"sfazB","stylesheet",[32,98,99],{"class":38},"\"\n",[32,101,103,106,108,110,113],{"class":34,"line":102},6,[32,104,105],{"class":46},"      href",[32,107,89],{"class":38},[32,109,92],{"class":38},[32,111,112],{"class":95},"\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Fbootstrap\u002F3.2.0\u002Fcss\u002Fbootstrap.min.css",[32,114,99],{"class":38},[32,116,118],{"class":34,"line":117},7,[32,119,120],{"class":38},"    \u002F>\n",[32,122,124,126,129,132,134,136,139,141,144,146],{"class":34,"line":123},8,[32,125,77],{"class":38},[32,127,128],{"class":42},"script",[32,130,131],{"class":46}," src",[32,133,89],{"class":38},[32,135,92],{"class":38},[32,137,138],{"class":95},"\u002F\u002Fajax.googleapis.com\u002Fajax\u002Flibs\u002Fjquery\u002F1.11.1\u002Fjquery.min.js",[32,140,92],{"class":38},[32,142,143],{"class":38},">\u003C\u002F",[32,145,128],{"class":42},[32,147,50],{"class":38},[32,149,151,153,155,157,159,161,164,166,168,170],{"class":34,"line":150},9,[32,152,77],{"class":38},[32,154,128],{"class":42},[32,156,131],{"class":46},[32,158,89],{"class":38},[32,160,92],{"class":38},[32,162,163],{"class":95},"\u002F\u002Fajax.googleapis.com\u002Fajax\u002Flibs\u002Fjquery\u002F2.1.1\u002Fjquery.min.js",[32,165,92],{"class":38},[32,167,143],{"class":38},[32,169,128],{"class":42},[32,171,50],{"class":38},[32,173,175,177,179,181,183,185,188,190,192,194],{"class":34,"line":174},10,[32,176,77],{"class":38},[32,178,128],{"class":42},[32,180,131],{"class":46},[32,182,89],{"class":38},[32,184,92],{"class":38},[32,186,187],{"class":95},"script.js",[32,189,92],{"class":38},[32,191,143],{"class":38},[32,193,128],{"class":42},[32,195,50],{"class":38},[32,197,199,202,204],{"class":34,"line":198},11,[32,200,201],{"class":38},"  \u003C\u002F",[32,203,69],{"class":42},[32,205,50],{"class":38},[32,207,209],{"class":34,"line":208},12,[32,210,212],{"emptyLinePlaceholder":211},true,"\n",[32,214,216,218,221],{"class":34,"line":215},13,[32,217,66],{"class":38},[32,219,220],{"class":42},"body",[32,222,50],{"class":38},[32,224,226,228,231,234,236,238,241,243],{"class":34,"line":225},14,[32,227,77],{"class":38},[32,229,230],{"class":42},"div",[32,232,233],{"class":46}," class",[32,235,89],{"class":38},[32,237,92],{"class":38},[32,239,240],{"class":95},"container",[32,242,92],{"class":38},[32,244,50],{"class":38},[32,246,248,251,253,255,257,259,262,264],{"class":34,"line":247},15,[32,249,250],{"class":38},"      \u003C",[32,252,230],{"class":42},[32,254,233],{"class":46},[32,256,89],{"class":38},[32,258,92],{"class":38},[32,260,261],{"class":95},"form-group",[32,263,92],{"class":38},[32,265,50],{"class":38},[32,267,269,272,275,278,280,283,286,288,290,293,295,298,300,302,305,307],{"class":34,"line":268},16,[32,270,271],{"class":38},"        \u003C",[32,273,274],{"class":42},"form",[32,276,277],{"class":46}," action",[32,279,89],{"class":38},[32,281,282],{"class":38},"\"\"",[32,284,285],{"class":46}," method",[32,287,89],{"class":38},[32,289,92],{"class":38},[32,291,292],{"class":95},"get",[32,294,92],{"class":38},[32,296,297],{"class":46}," accept-charset",[32,299,89],{"class":38},[32,301,92],{"class":38},[32,303,304],{"class":95},"utf-8",[32,306,92],{"class":38},[32,308,50],{"class":38},[32,310,312,315],{"class":34,"line":311},17,[32,313,314],{"class":38},"          \u003C",[32,316,317],{"class":42},"textarea\n",[32,319,321,324,326,328,331],{"class":34,"line":320},18,[32,322,323],{"class":46},"            class",[32,325,89],{"class":38},[32,327,92],{"class":38},[32,329,330],{"class":95},"form-control",[32,332,99],{"class":38},[32,334,336,339,341,343,346],{"class":34,"line":335},19,[32,337,338],{"class":46},"            name",[32,340,89],{"class":38},[32,342,92],{"class":38},[32,344,345],{"class":95},"the-new-com",[32,347,99],{"class":38},[32,349,351,354,356,358,360],{"class":34,"line":350},20,[32,352,353],{"class":46},"            id",[32,355,89],{"class":38},[32,357,92],{"class":38},[32,359,345],{"class":95},[32,361,99],{"class":38},[32,363,365,368,370,372,375],{"class":34,"line":364},21,[32,366,367],{"class":46},"            cols",[32,369,89],{"class":38},[32,371,92],{"class":38},[32,373,374],{"class":95},"30",[32,376,99],{"class":38},[32,378,380,383,385,387,390],{"class":34,"line":379},22,[32,381,382],{"class":46},"            rows",[32,384,89],{"class":38},[32,386,92],{"class":38},[32,388,389],{"class":95},"10",[32,391,99],{"class":38},[32,393,395,398,401],{"class":34,"line":394},23,[32,396,397],{"class":38},"          >\u003C\u002F",[32,399,400],{"class":42},"textarea",[32,402,50],{"class":38},[32,404,406,408,411],{"class":34,"line":405},24,[32,407,314],{"class":38},[32,409,410],{"class":42},"br",[32,412,413],{"class":38}," \u002F>\n",[32,415,417,419],{"class":34,"line":416},25,[32,418,314],{"class":38},[32,420,421],{"class":42},"input\n",[32,423,425,427,429,431,434],{"class":34,"line":424},26,[32,426,323],{"class":46},[32,428,89],{"class":38},[32,430,92],{"class":38},[32,432,433],{"class":95},"btn btn-success",[32,435,99],{"class":38},[32,437,439,442,444,446,449],{"class":34,"line":438},27,[32,440,441],{"class":46},"            type",[32,443,89],{"class":38},[32,445,92],{"class":38},[32,447,448],{"class":95},"submit",[32,450,99],{"class":38},[32,452,454,456,458,460,462],{"class":34,"line":453},28,[32,455,338],{"class":46},[32,457,89],{"class":38},[32,459,92],{"class":38},[32,461,448],{"class":95},[32,463,99],{"class":38},[32,465,467,469,471,473,475],{"class":34,"line":466},29,[32,468,353],{"class":46},[32,470,89],{"class":38},[32,472,92],{"class":38},[32,474,448],{"class":95},[32,476,99],{"class":38},[32,478,480],{"class":34,"line":479},30,[32,481,482],{"class":38},"          \u002F>\n",[32,484,486,489,491],{"class":34,"line":485},31,[32,487,488],{"class":38},"        \u003C\u002F",[32,490,274],{"class":42},[32,492,50],{"class":38},[32,494,496,499,501],{"class":34,"line":495},32,[32,497,498],{"class":38},"      \u003C\u002F",[32,500,230],{"class":42},[32,502,50],{"class":38},[32,504,506,509,511],{"class":34,"line":505},33,[32,507,508],{"class":38},"    \u003C\u002F",[32,510,230],{"class":42},[32,512,50],{"class":38},[32,514,516,518,520],{"class":34,"line":515},34,[32,517,201],{"class":38},[32,519,220],{"class":42},[32,521,50],{"class":38},[32,523,525,528,530],{"class":34,"line":524},35,[32,526,527],{"class":38},"\u003C\u002F",[32,529,26],{"class":42},[32,531,50],{"class":38},[21,533,534],{"className":23,"code":24,"language":26,"meta":27,"style":27},[29,535,536,546,554,562,568,580,592,596,618,640,662,670,674,682,700,718,752,758,770,782,794,806,818,826,834,840,852,864,876,888,892,900,908,916,924],{"__ignoreMap":27},[32,537,538,540,542,544],{"class":34,"line":35},[32,539,39],{"class":38},[32,541,43],{"class":42},[32,543,47],{"class":46},[32,545,50],{"class":38},[32,547,548,550,552],{"class":34,"line":53},[32,549,56],{"class":38},[32,551,26],{"class":42},[32,553,50],{"class":38},[32,555,556,558,560],{"class":34,"line":63},[32,557,66],{"class":38},[32,559,69],{"class":42},[32,561,50],{"class":38},[32,563,564,566],{"class":34,"line":74},[32,565,77],{"class":38},[32,567,80],{"class":42},[32,569,570,572,574,576,578],{"class":34,"line":83},[32,571,86],{"class":46},[32,573,89],{"class":38},[32,575,92],{"class":38},[32,577,96],{"class":95},[32,579,99],{"class":38},[32,581,582,584,586,588,590],{"class":34,"line":102},[32,583,105],{"class":46},[32,585,89],{"class":38},[32,587,92],{"class":38},[32,589,112],{"class":95},[32,591,99],{"class":38},[32,593,594],{"class":34,"line":117},[32,595,120],{"class":38},[32,597,598,600,602,604,606,608,610,612,614,616],{"class":34,"line":123},[32,599,77],{"class":38},[32,601,128],{"class":42},[32,603,131],{"class":46},[32,605,89],{"class":38},[32,607,92],{"class":38},[32,609,138],{"class":95},[32,611,92],{"class":38},[32,613,143],{"class":38},[32,615,128],{"class":42},[32,617,50],{"class":38},[32,619,620,622,624,626,628,630,632,634,636,638],{"class":34,"line":150},[32,621,77],{"class":38},[32,623,128],{"class":42},[32,625,131],{"class":46},[32,627,89],{"class":38},[32,629,92],{"class":38},[32,631,163],{"class":95},[32,633,92],{"class":38},[32,635,143],{"class":38},[32,637,128],{"class":42},[32,639,50],{"class":38},[32,641,642,644,646,648,650,652,654,656,658,660],{"class":34,"line":174},[32,643,77],{"class":38},[32,645,128],{"class":42},[32,647,131],{"class":46},[32,649,89],{"class":38},[32,651,92],{"class":38},[32,653,187],{"class":95},[32,655,92],{"class":38},[32,657,143],{"class":38},[32,659,128],{"class":42},[32,661,50],{"class":38},[32,663,664,666,668],{"class":34,"line":198},[32,665,201],{"class":38},[32,667,69],{"class":42},[32,669,50],{"class":38},[32,671,672],{"class":34,"line":208},[32,673,212],{"emptyLinePlaceholder":211},[32,675,676,678,680],{"class":34,"line":215},[32,677,66],{"class":38},[32,679,220],{"class":42},[32,681,50],{"class":38},[32,683,684,686,688,690,692,694,696,698],{"class":34,"line":225},[32,685,77],{"class":38},[32,687,230],{"class":42},[32,689,233],{"class":46},[32,691,89],{"class":38},[32,693,92],{"class":38},[32,695,240],{"class":95},[32,697,92],{"class":38},[32,699,50],{"class":38},[32,701,702,704,706,708,710,712,714,716],{"class":34,"line":247},[32,703,250],{"class":38},[32,705,230],{"class":42},[32,707,233],{"class":46},[32,709,89],{"class":38},[32,711,92],{"class":38},[32,713,261],{"class":95},[32,715,92],{"class":38},[32,717,50],{"class":38},[32,719,720,722,724,726,728,730,732,734,736,738,740,742,744,746,748,750],{"class":34,"line":268},[32,721,271],{"class":38},[32,723,274],{"class":42},[32,725,277],{"class":46},[32,727,89],{"class":38},[32,729,282],{"class":38},[32,731,285],{"class":46},[32,733,89],{"class":38},[32,735,92],{"class":38},[32,737,292],{"class":95},[32,739,92],{"class":38},[32,741,297],{"class":46},[32,743,89],{"class":38},[32,745,92],{"class":38},[32,747,304],{"class":95},[32,749,92],{"class":38},[32,751,50],{"class":38},[32,753,754,756],{"class":34,"line":311},[32,755,314],{"class":38},[32,757,317],{"class":42},[32,759,760,762,764,766,768],{"class":34,"line":320},[32,761,323],{"class":46},[32,763,89],{"class":38},[32,765,92],{"class":38},[32,767,330],{"class":95},[32,769,99],{"class":38},[32,771,772,774,776,778,780],{"class":34,"line":335},[32,773,338],{"class":46},[32,775,89],{"class":38},[32,777,92],{"class":38},[32,779,345],{"class":95},[32,781,99],{"class":38},[32,783,784,786,788,790,792],{"class":34,"line":350},[32,785,353],{"class":46},[32,787,89],{"class":38},[32,789,92],{"class":38},[32,791,345],{"class":95},[32,793,99],{"class":38},[32,795,796,798,800,802,804],{"class":34,"line":364},[32,797,367],{"class":46},[32,799,89],{"class":38},[32,801,92],{"class":38},[32,803,374],{"class":95},[32,805,99],{"class":38},[32,807,808,810,812,814,816],{"class":34,"line":379},[32,809,382],{"class":46},[32,811,89],{"class":38},[32,813,92],{"class":38},[32,815,389],{"class":95},[32,817,99],{"class":38},[32,819,820,822,824],{"class":34,"line":394},[32,821,397],{"class":38},[32,823,400],{"class":42},[32,825,50],{"class":38},[32,827,828,830,832],{"class":34,"line":405},[32,829,314],{"class":38},[32,831,410],{"class":42},[32,833,413],{"class":38},[32,835,836,838],{"class":34,"line":416},[32,837,314],{"class":38},[32,839,421],{"class":42},[32,841,842,844,846,848,850],{"class":34,"line":424},[32,843,323],{"class":46},[32,845,89],{"class":38},[32,847,92],{"class":38},[32,849,433],{"class":95},[32,851,99],{"class":38},[32,853,854,856,858,860,862],{"class":34,"line":438},[32,855,441],{"class":46},[32,857,89],{"class":38},[32,859,92],{"class":38},[32,861,448],{"class":95},[32,863,99],{"class":38},[32,865,866,868,870,872,874],{"class":34,"line":453},[32,867,338],{"class":46},[32,869,89],{"class":38},[32,871,92],{"class":38},[32,873,448],{"class":95},[32,875,99],{"class":38},[32,877,878,880,882,884,886],{"class":34,"line":466},[32,879,353],{"class":46},[32,881,89],{"class":38},[32,883,92],{"class":38},[32,885,448],{"class":95},[32,887,99],{"class":38},[32,889,890],{"class":34,"line":479},[32,891,482],{"class":38},[32,893,894,896,898],{"class":34,"line":485},[32,895,488],{"class":38},[32,897,274],{"class":42},[32,899,50],{"class":38},[32,901,902,904,906],{"class":34,"line":495},[32,903,498],{"class":38},[32,905,230],{"class":42},[32,907,50],{"class":38},[32,909,910,912,914],{"class":34,"line":505},[32,911,508],{"class":38},[32,913,230],{"class":42},[32,915,50],{"class":38},[32,917,918,920,922],{"class":34,"line":515},[32,919,201],{"class":38},[32,921,220],{"class":42},[32,923,50],{"class":38},[32,925,926,928,930],{"class":34,"line":524},[32,927,527],{"class":38},[32,929,26],{"class":42},[32,931,50],{"class":38},[11,933,934],{},"Here in script.js, when the document is ready & submit button is clicked jQuery checks to see the index of www & http in the textarea input string. If the words are found then form is not submitted else the form is submitted.",[15,936,937],{},[11,938,939],{},"Note: You may also try using .match() jQuery function, which works similar to html5 pattern.",[941,942,943],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":27,"searchDepth":53,"depth":53,"links":945},[],"2014-09-20","In this article we will take a look at how we can do HTML5 TextArea Validation with jQuery to disallow certain words","md",null,{},"\u002Fblog\u002Fhtml5-textarea-validation-jquery-disallow-certain-words-330",false,{"title":5,"description":947},"blog\u002Fhtml5-textarea-validation-jquery-disallow-certain-words-330",[956,957,958],"Mobile Development","Web Design","Web Development","wNqPwzasUc7vNIijRIloj0DsrMhYxE1nVs4zYEEDXSI",[961,966],{"title":962,"path":963,"stem":964,"description":965,"children":-1},"How I Built a Personal Knowledge Wiki with Claude Code","\u002Fblog\u002Fhow-i-built-a-personal-knowledge-wiki-with-claude-code","blog\u002Fhow-i-built-a-personal-knowledge-wiki-with-claude-code","How I turned 14,000+ scattered files — YouTube transcripts, 13 years of RSS feeds, Google Takeout data, Notion exports — into a 50-page cross-referenced knowledge wiki using Claude Code and flat markdown files.",{"title":967,"path":968,"stem":969,"description":967,"children":-1},"Ionic Snippets – Sublime Plugin","\u002Fblog\u002Fionic-snippets-sublime-plugin-301","blog\u002Fionic-snippets-sublime-plugin-301",1775568346831]