Develop Reference

parameter.includes() is not a function

I'm pretty new at js programming. I'm developing an admission form as part of our project to be submitted. It's also my first time asking a question here.
I'm creating a form of validation to prevent any invalid values to be entered. I also need some optimizations at my code. If you have any suggestions to make it shorter, I'll be glad to accept your suggestion too.
I tried executing the matchCheck() function on other scenarios, but it just works fine. I also tried executing validateDate() on the console and other scenarios, but it also worked without any errors. I got an error when the functions are executed at if statements.
Here is the error message: Unknown TypeError: arrayToBeChecked.includes is not a function
I got an error at these function and if statements:
function matchCheck(arrayToBeChecked, findingValue) {
return arrayToBeChecked.includes(findingValue);
}
if (matchCheck(date[0], "null") === false)
if (validateDate(bdate) === true)
Here is the code (Excluded some of the unrelated variables and codes):
//Check Match
function matchCheck(arrayToBeChecked, findingValue) {
return arrayToBeChecked.includes(findingValue);
}
//Date Validator
//Expected Format [MM/DD/YYYY]
function validateDate(date) {
//check if the date is valid
var leapYear = date[2] % 4;
var mos31 = ["1", "3", "5", "7", "8", "10", "12"];
var mos30 = ["4", "6", "9", "11"];
var flyInv = ["30", "31"];
var fnlyInv = ["29", "30", "31"];
var mos30Inv = "31";
if (matchCheck(date[0], "null") === false) {
if (matchCheck(date[1], "null") === false) {
if (matchCheck(date[2], "null") === false) {
if (leapYear == 0) {
if (date[0] == "2") {
if (matchCheck(flyInv, date[1]) === false) {
return true;
}
else {
return false;
}
}
else if (matchCheck(mos31, date[0]) === true) {
return true;
}
else if (matchCheck(mos30, date[0]) === true) {
if (matchCheck(mos30Inv, date[1]) === false) {
return true;
}
else {
return false;
}
}
else {
return false
}
}
else {
if (date[0] == "2") {
if (matchCheck(fnlyInv, date[1]) === false) {
return true;
}
else {
return false;
}
}
else if (matchCheck(mos31, date[0]) === true) {
return true;
}
else if (matchCheck(mos30, date[0]) === true) {
if (matchCheck(mos30Inv, date[1]) === false) {
return true;
}
else {
return false;
}
}
else {
return false;
}
}
}
else {
return false;
}
}
else {
return false;
}
}
else {
return false;
}
}
//Contact Number Validator
//Expected Format [09XXXXXXXXX]
function cnValid(nos) {
if (nos.value.length === 11) {
if(nos.indexOf("09") > -1) {
return true;
}
else {
return false;
}
}
else {
return false;
}
}
//Check for empty selects
function checkEmptySelects(el) {
var selects = document.querySelectorAll(el);
var i;
for (i = 0; i < selects.length; i++) {
if (selects[i].value == "0") {
return true;
}
else {
return false;
}
}
}
//Valid Relation Values
var vrv = ["mother", "father", "grandmother", "grandfather", "auntie", "uncle", "housemaid", "Mother", "Father", "Grandmother", "Grandfather", "Auntie", "Uncle", "Housemaid", "Aunt", "aunt", "brother", "Brother", "sister", "Sister", "cousin", "Cousin"];
//Start Review
function reviewForm() {
var letters = /^[a-zA-Z\s]*$/;
var mailFormat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var noScFormat = /[^a-zA-Z0-9\\,\\.\s]/g;
//Perform Checks
if (checkEmptySelects("select") === false) {
if (ln.value.match(letters)) {
if (fn.value.match(letters)) {
if (mn.value.match(letters)) {
if (eml.value.match(mailFormat)) {
if (age.value >= 0) {
if (age.value <= 100) {
if (validateDate(bdate) === true) {
if (pob.value.match(noScFormat)) {
if (ca.value.match(noScFormat)) {
if (rlg.value.match(letters)) {
if (nsl.value.match(letters)) {
if (cmn.value.match(letters)) {
if (mo.value.match(letters)) {
if (cfn.value.match(letters)) {
if (fo.value.match(letters)) {
if (gn.value.match(letters)) {
if (matchCheck(vrv, rts) === true) {
if (cnValid(cn) === true) {
if (lrn.value.length === 12) {
//Submit Data to db if all of the requirements are passed.
}
else {
//Error Message;
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}

The error occurs when the "arrayToBeChecked" value that is passed to the "matchCheck()" function is not an arry. To fix this, you could convert "arrayToBeChecked" to an array if it's not already an array.
function matchCheck(arrayToBeChecked, findingValue) {
// Convert arrayToBeChecked to an array if it's not already an array
if (!Array.isArray(arrayToBeChecked)) {
arrayToBeChecked = [arrayToBeChecked];
}
return arrayToBeChecked.includes(findingValue);
}

Create a MR and MC in a javascript calculator

Idealy, I would like my little project to have the memory functions M-, M+, MR and MC.
I was thinking of separate functions and variables to hold the M- and M+.
Is this a normal approach or there is a better one ?
Any idea what might be wrong with my script ? if there is something wrong ?
the number-display ID is the actual calculator screen
the code is :
$(document).ready(function(){
var display = "";
var operators = ["/", "*", "-", "+"];
var decimalAdded = false;
$("button").click(function() {
var key = $(this).text();
//update screen by adding display string to screen with maximum 19 numbers viewable
function updateDisplay() {
if (display.length > 19) {
$("#number-display").html(display.substr(display.length - 19, display.length));
} else {
$("#number-display").html(display.substr(0, 19));
}
}
//clear all entries by resetting display and variables
if (key === "AC" || key === "ON" || key === "MC") {
decimalAdded = false;
display = "";
$("#number-display").html("0");
}
else if (key === "OFF") {
decimalAdded = false;
display = "";
$("#number-display").html("");
}
//clear previous character and reset decimal bool if last character is decimal
else if (key === "CE") {
if (display.substr(display.length - 1, display.length) === ".") {
decimalAdded = false;
}
display = display.substr(0, display.length - 1);
updateDisplay();
}
//add key to display if key is a number
else if (!isNaN(key)) {
display += key;
updateDisplay();
}
//check that . is the first in the number before adding and add 0. or just .
else if (key === ".") {
if (!decimalAdded) {
if(display > 0){
display += key;
}
else {
display += "0" + key;
}
decimalAdded = true;
updateDisplay();
}
}
//if key is basic operator, check that the last input was a number before inputting
else if (operators.indexOf(key) > -1) {
decimalAdded = false;
//first input is a number
if (display.length > 0 && !isNaN(display.substr(display.length - 1, display.length))) {
display += key;
updateDisplay();
}
// allow minus sign as first input
else if (display.length === 0 && key === "-") {
display += key;
updateDisplay();
}
}
// calculate square root of number
else if ( $(this).id === "sqrt") {
var tempStore = display.html();
$("#number-display").html(eval(Math.sqrt(tempStore)));
decimalAdded = false;
}
// change sign of number
else if ($(this).id === "plusmn") {
var newNum = display * -1;
$("#number-display").html(newNum);
}
// create memory plus and minus and calculate MR
else if (key === "M-") {
}
else if (key === "M+") {
}
// percentage function
else if (key === "%"){
}
else if (key == "=") {
//if last input is a decimal or operator, remove from display
if (isNaN(display.substr(display.length - 1, display.length))) {
display = display.substr(0, display.length - 1);
}
var calc = display;
calc = eval(calc);
display = String(calc);
if (display.indexOf('.')) {
decimalAdded = true;
} else {
decimalAdded = false;
}
$("#number-display").html(display);
}
});});

One alternative is a switch statement, which would look something like:
switch (key) {
case "M-":
// do stuff
break;
case "M+":
// do stuff
break;
case "%":
// do stuff
break;
case "=":
// do stuff
break;
}
More documentation on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

Call a function with its parameters if all required keys are pressed

I am trying to create a function that will call another function (passed as a parameter) if all the required keys are pressed. This is what I have so far:
function multiKeyPress(funcName, parms, key0, key1, key2, key3, key4, key5) {
var down = [];
var noKeys = arguments.length - 2
var args = parms
// for (i = 0; i < noKeys; i++) {
// if (i == noKeys - 1) {
// keyPress += ('down[key' + i + '])')
// } else {
// keyPress += ('down[key' + i + '] && ')
// }
// }
console.log(noKeys)
console.log(args);
switch (noKeys) {
case 1:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
case 2:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0] && down[key1]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
case 3:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0] && down[key1] && down[key2]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
case 4:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0] && down[key1] && down[key2] && down[key3]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
case 5:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0] && down[key1] && down[key2] && down[key3] && down[key4]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
case 6:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0] && down[key1] && down[key2] && down[key3] && down[key4] && down[key5]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
}
}
Near the top of the function I have commented out a loop that would create a string with the necessary keys but I couldnt pass that as a condition because a string will be a truthy value. Therefore I resorted to a long switch statement. This currently works but I was wondering if there was a way to clean it up or if there are any potential problems.
Thanks

You're on the right track, you just need to think about using arrays.
function multiKeyPress(funcName, parms) {
var keysPressed = Array.prototype.slice.call(arguments, 2);
var down = [];
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
var allPressed = keysPressed.every(function (key) {
return down[key];
});
if (allPressed) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
}
That gets any number of keys passed into the function by treating the arguments like an array. Then the keyup handler uses the every method of Array to make sure all of the entries in the array have been pressed.
I should warn you I haven't tested this in a working application, since none was provided, but I'm pretty sure it will function as a replacement.
If you want help with sorting out this string you talk about in the question, do include it in the question, or add a new question specifically about that code.

Validate form function jump to error?

I have a form with a validation script that works perfectly. I would however like the form to jump to the fields that doesn't validate or display the name of the fields in the error message.
The code I use to validate is:
else
{
var valid = document.formvalidator.isValid(f);
}
if (flag == 0 || valid == true) {
f.check.value = '<?php echo JUtility::getToken(); ?>';//send token
}
else {
alert('There was an error with the fields..');
return false;
}
return true;
How can I get the alert to name the fields that need to be filled in correctly or jump to the specific field?
Edited ----------
Hi,
Thanks for help so far. I'm very new to JS. The form is in a component of Joomla.
The full function that validates the form is
function validateForm(f){
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer"){
var flag = 0;
for (var i=0;i < f.elements.length; i++) {
el = f.elements[i];
if ($(el).hasClass('required')) {
var idz= $(el).getProperty('id');
if(document.getElementById(idz)){
if (!document.getElementById(idz).value) {
document.formvalidator.handleResponse(false, el);
flag = flag + 1;
}
}
}
}
}
else {
var valid = document.formvalidator.isValid(f);
}
if(flag == 0 || valid == true){
f.check.value='<?php echo JUtility::getToken(); ?>';//send token
}
else {
alert('<?php echo JText::_('JBJOBS_FIEDS_HIGHLIGHTED_RED_COMPULSORY'); ?>');
return false;
}
return true;
}
External js file:
var JFormValidator = new Class(
{
initialize : function() {
this.handlers = Object();
this.custom = Object();
this.setHandler("username", function(b) {
regex = new RegExp("[<|>|\"|'|%|;|(|)|&]", "i");
return !regex.test(b)
});
this.setHandler("password", function(b) {
regex = /^\S[\S ]{2,98}\S$/;
return regex.test(b)
});
this.setHandler('passverify',
function (value) {
return ($('password').value == value);
}
); // added March 2011
this.setHandler("numeric", function(b) {
regex = /^(\d|-)?(\d|,)*\.?\d*$/;
return regex.test(b)
});
this
.setHandler(
"email",
function(b) {
regex = /^[a-zA-Z0-9._-]+(\+[a-zA-Z0-9._-]+)*#([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/;
return regex.test(b)
});
var a = $$("form.form-validate");
a.each(function(b) {
this.attachToForm(b)
}, this)
},
setHandler : function(b, c, a) {
a = (a == "") ? true : a;
this.handlers[b] = {
enabled : a,
exec : c
}
},
attachToForm : function(a) {
a.getElements("input,textarea,select")
.each(
function(b) {
if (($(b).get("tag") == "input" || $(b)
.get("tag") == "button")
&& $(b).get("type") == "submit") {
if (b.hasClass("validate")) {
b.onclick = function() {
return document.formvalidator
.isValid(this.form)
}
}
} else {
b.addEvent("blur", function() {
return document.formvalidator
.validate(this)
})
}
})
},
validate : function(c) {
c = $(c);
if (c.get("disabled")) {
this.handleResponse(true, c);
return true
}
if (c.hasClass("required")) {
if (c.get("tag") == "fieldset"
&& (c.hasClass("radio") || c.hasClass("checkboxes"))) {
for ( var a = 0;; a++) {
if (document.id(c.get("id") + a)) {
if (document.id(c.get("id") + a).checked) {
break
}
} else {
this.handleResponse(false, c);
return false
}
}
} else {
if (!(c.get("value"))) {
this.handleResponse(false, c);
return false
}
}
}
var b = (c.className && c.className
.search(/validate-([a-zA-Z0-9\_\-]+)/) != -1) ? c.className
.match(/validate-([a-zA-Z0-9\_\-]+)/)[1]
: "";
if (b == "") {
this.handleResponse(true, c);
return true
}
if ((b) && (b != "none") && (this.handlers[b])
&& c.get("value")) {
if (this.handlers[b].exec(c.get("value")) != true) {
this.handleResponse(false, c);
return false
}
}
this.handleResponse(true, c);
return true
},
isValid : function(c) {
var b = true;
var d = c.getElements("fieldset").concat($A(c.elements));
for ( var a = 0; a < d.length; a++) {
if (this.validate(d[a]) == false) {
b = false
}
}
new Hash(this.custom).each(function(e) {
if (e.exec() != true) {
b = false
}
});
return b
},
handleResponse : function(b, a) {
if (!(a.labelref)) {
var c = $$("label");
c.each(function(d) {
if (d.get("for") == a.get("id")) {
a.labelref = d
}
})
}
if (b == false) {
a.addClass("invalid");
a.set("aria-invalid", "true");
if (a.labelref) {
document.id(a.labelref).addClass("invalid");
document.id(a.labelref).set("aria-invalid", "true");
}
} else {
a.removeClass("invalid");
a.set("aria-invalid", "false");
if (a.labelref) {
document.id(a.labelref).removeClass("invalid");
document.id(a.labelref).set("aria-invalid", "false");
}
}
}
});
document.formvalidator = null;
window.addEvent("domready", function() {
document.formvalidator = new JFormValidator()
});
Where would I edit the code as some of you have answered below?

with jquery js library, scroll to element (id selector or class)
<p class="error">There was a problem with this element.</p>
This gets passed to the ScrollTo plugin in the following way.
$.scrollTo($('p.error:1'));
see source

Using jQuery's .each, loop over the fields. On every iteration the item that is being invesitigated will be under the this variable.
Therefore, this.id gives the id of the element you're looking for. Store these to collect all the incorrect fields, then highlight them or print their names in a message.
Keep in mind, this is the basic idea, I cannot give an actual answer until you show the code that handles the form.
Kind regards,
D.

You can have your isValid routine return the error message instead of returning a boolean.
In isValid, you can build up the error message to include the field names with errors.
Instead of checking "valid == true", you will check "errorMessage.length == 0".
If you want to focus on an error field (you can only focus on one), then do that in the isValid routine as well.
function isValid(f) {
var errorMessage = "";
var errorFields = "";
var isFocused = false;
...
if (field has an error) {
errorFields += " " + field.name;
if (!isFocused) {
field.focus();
isFocused = true;
}
}
...
if (errorFields.length > 0) {
errorMessage = "Errors in fields: " + errorFields;
}
return (errorMessage);
}
then, in your calling routine:
var errorMessage = isValid(f);
if (flag == 0 || errorMessage.length == 0) {
f.check.value='<?php echo JUtility::getToken(); ?>';//send token
}
else {
alert(errorMessage);
return false;
}
return true;

How to add a Visual Basic .NET syntax highlighting to CodeMirror editor?

How to add a Visual Basic .NET syntax highlighting to CodeMirror editor? Does exists the mode for this language on any library? What should I correct except keywords, blockKeywords and atoms?
Pascal example:
CodeMirror.defineMode("pascal", function(config) {
function words(str) {
var obj = {}, words = str.split(" ");
for (var i = 0; i < words.length; ++i) obj[words[i]] = true;
return obj;
}
var keywords = words("and array begin case const div do downto else end file for forward integer " +
"boolean char function goto if in label mod nil not of or packed procedure " +
"program record repeat set string then to type until var while with");
var blockKeywords = words("case do else for if switch while struct then of");
var atoms = {"null": true};
var isOperatorChar = /[+\-*&%=<>!?|\/]/;
var curPunc;
function tokenBase(stream, state) {
var ch = stream.next();
if (ch == "#" && state.startOfLine) {
stream.skipToEnd();
return "meta";
}
if (ch == '"' || ch == "'") {
state.tokenize = tokenString(ch);
return state.tokenize(stream, state);
}
if (ch == "(" && stream.eat("*")) {
state.tokenize = tokenComment;
return tokenComment(stream, state);
}
if (/[\[\]{}\(\),;\:\.]/.test(ch)) {
curPunc = ch;
return null
}
if (/\d/.test(ch)) {
stream.eatWhile(/[\w\.]/);
return "number";
}
if (ch == "/") {
if (stream.eat("/")) {
stream.skipToEnd();
return "comment";
}
}
if (isOperatorChar.test(ch)) {
stream.eatWhile(isOperatorChar);
return "operator";
}
stream.eatWhile(/[\w\$_]/);
var cur = stream.current();
if (keywords.propertyIsEnumerable(cur)) {
if (blockKeywords.propertyIsEnumerable(cur)) curPunc = "newstatement";
return "keyword";
}
if (atoms.propertyIsEnumerable(cur)) return "atom";
return "word";
}
function tokenString(quote) {
return function(stream, state) {
var escaped = false, next, end = false;
while ((next = stream.next()) != null) {
if (next == quote && !escaped) {end = true; break;}
escaped = !escaped && next == "\\";
}
if (end || !escaped) state.tokenize = null;
return "string";
};
}
function tokenComment(stream, state) {
var maybeEnd = false, ch;
while (ch = stream.next()) {
if (ch == ")" && maybeEnd) {
state.tokenize = null;
break;
}
maybeEnd = (ch == "*");
}
return "comment";
}
function Context(indented, column, type, align, prev) {
this.indented = indented;
this.column = column;
this.type = type;
this.align = align;
this.prev = prev;
}
function pushContext(state, col, type) {
return state.context = new Context(state.indented, col, type, null, state.context);
}
function popContext(state) {
var t = state.context.type;
if (t == ")" || t == "]" )
state.indented = state.context.indented;
return state.context = state.context.prev;
}
// Interface
return {
startState: function(basecolumn) {
return {
tokenize: null,
context: new Context((basecolumn || 0) - config.indentUnit, 0, "top", false),
indented: 0,
startOfLine: true
};
},
token: function(stream, state) {
var ctx = state.context;
if (stream.sol()) {
if (ctx.align == null) ctx.align = false;
state.indented = stream.indentation();
state.startOfLine = true;
}
if (stream.eatSpace()) return null;
curPunc = null;
var style = (state.tokenize || tokenBase)(stream, state);
if (style == "comment" || style == "meta") return style;
if (ctx.align == null) ctx.align = true;
if ((curPunc == ";" || curPunc == ":") && ctx.type == "statement") popContext(state);
else if (curPunc == "[") pushContext(state, stream.column(), "]");
else if (curPunc == "(") pushContext(state, stream.column(), ")");
else if (curPunc == ctx.type) popContext(state);
else if ( ctx.type == "top" || (ctx.type == "statement" && curPunc == "newstatement"))
pushContext(state, stream.column(), "statement");
state.startOfLine = false;
return style;
},
electricChars: "{}"
};
});
CodeMirror.defineMIME("text/x-pascal", "pascal");
Thanks for the help!

This worked for me -
I added this definition in clike mode js file
CodeMirror.defineMIME("text/x-vb", {
name: "clike",
keywords: words("AddHandler AddressOf Alias And AndAlso Ansi As Assembly Auto Boolean ByRef Byte " +
"ByVal Call Case Catch CBool CByte CChar CDate CDec CDbl Char CInt Class CLng CObj Const CShort CSng CStr CType " +
"Date Decimal Declare Default Delegate Dim DirectCast Do Double Each Else ElseIf End Enum Erase Error Event Exit False Finally "+
"For Friend Function Get GetType GoSub GoTo Handles If Implements Imports In Inherits Integer Interface Is " +
"Let Lib Like Long Loop Me Mod Module MustInherit MustOverride MyBase MyClass Namespace New Next Not "+
"Nothing NotInheritable NotOverridable Object On Option Optional Or OrElse Overloads Overridable Overrides " +
"ParamArray Preserve Private Property Protected Public RaiseEvent ReadOnly ReDim REM RemoveHandler Resume " +
"Return Select Set Shadows Shared Short Single Static Step Stop String Structure Sub SyncLock Then Throw " +
"To True Try TypeOf Unicode Until Variant When While With WithEvents WriteOnly Xor"),
//blockKeywords: words("catch class do else finally for if switch try while"),
atoms: words("True False Null"),
hooks: {
"#": function(stream, state) {
stream.eatWhile(/[\w\$_]/);
return "meta";
}
}
});