As a beginner, I am attempting to create a custom jQuery plugin for which I have a simple HTML form:
<form id="registerForm" action = "somepage" method="post" class="mb-sm">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="fname">First Name* :</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Owner's First Name" name="fname">
<div class="alert alert-danger hidden mt-lg" id="fnameerrbox"></div>
</div>
</div>
</form>
In the "js" folder, there is a javascript page named validation.js with the following code:
"use strict";
var errcontent;
function showerror(errbox, errcontent){
if($(errbox).hasClass("hidden")){
$(errbox).removeClass("hidden");
$(errbox).html(errcontent);
}
}
function hideerror(errbox, errcontent){
if(!$(errbox).hasClass("hidden")){
$(errbox).html(errcontent);
$(errbox).addClass("hidden");
}
}
(function ($){
$.fn.alphaNumeric = function(element, errbox){
var alphanumeric = /^[a-zA-Z 0-9.,]*$/;
if(!alphanumeric.test(element)){
errcontent = "Only alphabets, numbers, dot, comma are allowed";
showerror(errbox, errcontent);
}
if(alphanumeric.test(element)){
errcontent = "";
hideerror(errbox, errcontent);
}
}
})(jQuery);
Another javascript page named custom.js extracts values from input elements, here is the code:
"use strict";
var fname;
var errbox;
$(document).ready(function(){
$("#fname").keyup(function(){
fname = $('#fname').val();
errbox = $("#fnameerrbox");
alphaNumeric(fname, errbox); // This line is causing an error
});
});
Upon running this, an error occurs:
Uncaught ReferenceError: alphaNumeric is not defined at HTMLInputElement. (custom.js:8) at HTMLInputElement.dispatch (jquery.min.js:2) at HTMLInputElement.y.handle (jquery.min.js:2)
I understand that I need to initialize this and my validation method "alphaNumeric" is not defined, but I am unsure of how to do so. Being new to this, I would greatly appreciate any assistance. Thank you.