I have this javascript running on a html form. really struggling to get this working, Nothing pops up, no alerts at all. any help please. My code is probably terrible but I have only been using javascript for 4 weeks
function validate(form){
var vRunnerId = document.forms["submitrunnertime"]["RunnerId"].value;
var vEventId = document.forms["submitrunnertime"]["EventId"].value;
var vDate = document.forms["submitrunnertime"]["Date"].value;
var vFinishTime = document.forms["submitrunnertime"]["FinishTime"].value;
var vPosition = document.forms["submitrunnertime"]["Position"].value;
var vCategoryId = document.forms["submitrunnertime"]["CategoryId"].value;
var vAgeGrade = document.forms["submitrunnertime"]["AgeGrade"].value;
var vPB = document.forms["submitrunnertime"]["PB"].value;
var validFormat = /^\d{4}-\d{2}-\d{2}$/;
if (/\D/.test(vRunnerId)){
alert("Please only enter numeric characters only for your Runner ID");
return false;
}
if (/\D/.test(vEventId)){
alert("Please only enter numeric characters only for your Event ID");
return false;
}
if (!validFormat.test(vDate){
alert("Please enter date in YYYY-MM-DD");
return false;
}
return true;
}
I don't see your vDate being defined anywhere in that function, so it looks like you forgot to add that to your javascript.
You are grabbing the <input> value twice. Once here:
var vDate = document.forms["submitrunnertime"]["Date"].value;
and again in the check:
if (!validFormat.test(vDate.value)){
You're trying to find the .value of a .value which I would assumed would throw en error.
Related
Im trying to code a simple task.
i need to get a password from html form, and check if there is both numbers and letters there, and that the password is not longer then 10 letters or short then 4.
so i wrote something (probably terrible) and its not working (surprisingly xD).
anyways, heres my code.
function checkpassword(checked_id, error_id, err_color){
var upperCaseLetters = /[A-Z]/g;
var lowerCaseLetters = /[a-z]/g;
var numbers = /[0-9]/g;
element_checked = document.getElementById(checked_id);
element_error = document.getElementById(error_id);
element_error.style.color = err_color;
if (!checked_id.value.match(upperCaseLetters) && !checked_id.value.match(lowerCaseLetters)) {
element_checked.style.backgroundColor = err_color;
element_error.innerHTML = "enter letters";
return false;
}
else if(!checked_id.value.match(numbers))
{
element_checked.style.backgroundColor = err_color;
element_error.innerHTML = "Enter numbers";
return false;
}
return true;
}
The primary issue is that you used checked_id.value, which should be element_checked.value.
Also, generally it's advisable to create variables with let instead of var if you don't need them to be global.
In my JSP page I have one table in that one of the column is for the Time shown in the HH:mm format and the datatype is String (I converted it from Date to String in server). Now I am applying the Inline table row editing using the Jquery plugin Tabledit.
While I edit the column and before sending to the server I am checking it with RegExp.
var inTime = [];
var timeRegEx = new RegExp("^([0-9]|0[0-9]|1[0-9]|2[0-3]):([0-9]|0[0-9]|([1-5][0-9]))$");
inTime[1] = "14:34";
if (timeRegEx.test(inTime[1])) {
alert("Matched");
//return true;
} else {
alert("Not Mateched");
//return false;
}
I have checked the validity of the RegExp in some onilne resources and it is correct.
But in my case in every valid and invalid input it always goes to the else block.
And the more thing is that the while I print the value of the inTime[1] in alert. it gives the output like : 14%3A13
So I also replaced the : with %3A in RegExp but it also not worked.
So please tell me where I am going the wrong and what is the correct solution.
Edit:
Here : interpreted as %3A so may be this creates the problem.
Here inTime is array which get values from the table row.
var inTime = [];
var timeRegEx = new RegExp("^([0-9]|0[0-9]|1[0-9]|2[0-3]):([0-9]|0[0-9]|([1-5][0-9]))$");
inTime[1] = "14%A334";
if (decodeURIComponent(timeRegEx.test(inTime[1]))) {
console.log("Matched");
//return true;
} else {
console.log("Not Mateched");
//return false;
}
Does this suite your needs?
var regex = /^[12]?\d:[012345]\d$/,
tests = [
'56:12',
'03:68',
'2:49',
'12:59',
'23:00',
'abcs',
'12,23'
];
tests.forEach(test => {
var isValid = regex.test(test);
console.log(`is ${test} valid: ${isValid}`);
});
As I mentioned in the question that the array variable inTime[1] get the data from the HTML table. It takes the: as the %3A, so it creates the problem to test the RegExp.
#Spanky give me hint to try decodeURIComponent(timeRegEx.test(inTime[1])) but it also not worked for me.
So I have slight modify his solution and applied the decodeURIComponent() to only inTime[1] Variable. This worked for me.
The solution code snippet is as follow:
var inTime = [];
var timeRegEx = new RegExp("^([0-9]|0[0-9]|1[0-9]|2[0-3]):([0-9]|0[0-9]|([1-5][0-9]))$");
inTime[1] = "14%3A34";
if (timeRegEx.test(decodeURIComponent(inTime[1]))) {
console.log("Matched");
//return true;
} else {
console.log("Not Mateched");
//return false;
}
Here what the textbox result looks like,
Please add the following DNS entries
144.68.238.87 name.domain
144.68.238.88 name.domain
144.68.238.89 name.domain
The goal is to validate name.domain by making sure that the user replace name.domain to server name on textbox before submit it. If the user doesn't replace name.domain with their server name, then it will send alert message and return false until user replace it correctly.
Here is my codes,
function DomainValidate() {
var arrayOfLines = document.getElementById('txt').value.split('/n');
arrayOfLines.shift(); //use shift to skip the first line
for (i = 0; i < arrayOfLines.length; i++) {
//somewhere here need to split to get name.domain and then verify it
var domainName = arrayOfLines[i].split(" ", 2);
if(domainName.Equals("name.domain")
{
alert("You must replace name.domain to your new server name");
return false;
}
}
}
I am not sure if these are correct since I couldn't debug the javascript.
First issue I can see is that your character for the newline is incorrect. It should be \n not /n. Second issue I see is that i is a global variable, when it should be local. Third issue is that arrayOfLines[i].split(' ', 2); returns an array, but you are treating it like it returns a string on the next line if (domainName.Equals('name.domain').
With those corrections your code would look more like this:
function domainValidate() {
var arrayOfLines = document.getElementById('txt').value.split('\n');
arrayOfLines.shift(); //use shift to skip the first line
for (var i = 0; i < arrayOfLines.length; i++) {
var line = arrayOfLines[i].trim();
// Grab the second part of the split line, which represents the domain name
var parts = line.split(' ');
var domainName = parts[parts.length - 1];
if (!domainName || domainName === 'name.domain') {
alert("You must replace name.domain to your new server name");
return false;
}
}
}
As far as I can tell without testing, this should work as expected. The best way to test this though is with jsfiddle. Add your html and this script and call it to see if it produces the expected result.
Easiest way that I think
Suppose the id of textbox is domainTxt
src = document.getElementById("domainTxt");
if(verifyInput(src.value)){
//submit your form here
} else
{
return false;
}
function verifyInput(txtVal){
if(txtVal.indexOf("name.domain") >-1){
return false;
}else {
return true;
}
}
I have a problem here with validating user's input in textarea.
A user is suppose to enter his description in one of the textarea feild in form. But some people just put the random text like 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' or something to bypass the minimum length requirement.
Now i want to prevent user from typing such long text without any spaces since it disrupts the UI of my page.
Also a long text entered by user without any spaces can be a valid url too. So how do i manage this & throw a error to user to correct the text only if it is too long and it isnt a valid url ??
PS: I dont want to split string myself.. I just want to detect it and throw error to user on client side validation. Just to put end to some doubts, i will do server side validation in which i will forcibly enter a space and save it in DB. But i am expecting to solve this problem on client side
var STRING_MAX_LENGTH = 10;
var description = 'aaa aaaaaaaaaa bbbbbbbbbb http://www.google.com/search?q=client-side-filtering';
var array = description.split( ' ' );
$.each( array, function() {
if ( this.length >= STRING_MAX_LENGTH ) {
if( /^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*#)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)|\/|\?)*)?$/i . test( this ) ) {
alert( this + ' is an URL' );
} else {
alert( this + ' is not an URL' );
}
}
});
http://jsfiddle.net/vVYAp/
function validate()
{
var expression = /[-a-zA-Z0-9#:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9#:%_\+.~#?&//=]*)?/gi;
var wordLengthExpr = /\b[^\s]{50,}\b/;
var regex = new RegExp(expression);
var wordLengthRegex = new RegExp(wordLengthExpr);
var t = $("#myTextarea").val();
if (t.match(regex) || !t.match(wordLengthRegex))
{
//valid
}
else
{
//throw error
}
}
This is a two step process:
Determine if any words are too long.
If so, determine if they are valid URLs.
var validateWordLength = function (str) {
var maxLength = 50, // or whatever max length you want
reURL = /^(ftp|http|https):\/\/[^\s]+$/, // use whatever regular expression for URL matching you feel best
words = str.split(/\s+/),
i;
for (i = 0; i < words.length; i += 1) {
if (words[i].length > maxLength) {
// test for url
// but bear in mind the answer at http://stackoverflow.com/questions/1410311/regular-expression-for-url-validation-in-javascript
// testing for url may not be fruitful
if (!reURL.test(words[i])) {
return false;
}
}
}
return true;
};
try this
var value = Your text;
var result = value.replace(" ","");
if(value.length == result .length)
//not valid
else
//valid
You can get length of each word, and then can decide whether to allow the user or not -
var arr = text.split(' ');
$.each(arr,function(){
console.log(this.length);
// check valid word length
});
http://jsfiddle.net/mohammadAdil/cNZtn/
If you use the jQuery validate plugin you can add a method to it:
jQuery.validator.addMethod("samechars", function(value, element) {
return this.optional(element) || !/([a-z\d])\1\1/i.test(value);
}, "Invalid input");
If you want to use jQuery you can use the following:
$("form").submit(function(e){
var $textarea = $('#msg'),
maxWordLength = 20;
var value = $textarea.val().split(' '),
longWord = false;
for(var n = 0; n < value.length; n++) {
if(value[n].length >= maxWordLength)
longWord = true;
}
if(longWord) {
alert('Too long word');
return false;
}
});
Here is a fiddle:
http://jsfiddle.net/pJgyu/31286/
I had this function in a js file and everything was working just fine :
function check_acco_form()
{
var name=$("#name").val();
var institution=$("#institution").val();
var year=$("#year").val();
//PNR Data
var pnr1=$("#pnr1").val();
var pnr2=$("#pnr2").val();
// Arrival date info
var arr_year=$("#arr_year").val();
var arr_month=$("#arr_month").val();
var arr_date=$("#arr_date").val();
//Departure date info
var dep_year=$("#dep_year").val();
var dep_month=$("#dep_month").val();
var dep_date=$("#dep_date").val();
var numericExpression = /^[0-9]+$/;
//Name, institution and year must not be empty
if(name=="" || institution=="" || year=="")
{
alert("One or more fields are empty.");
return;
}
//PNR must be all numbers
if(!pnr1.match(numericExpression) || !pnr2.match(numericExpression))
{
alert("A PNR number consists of 10 digits only. Please enter again.");
$("#pnr1").val("");
$("#pnr2").val("");
return;
}
if(pnr1.length!=3 || pnr2.length!=7)
{
alert('Invalid PNR Number.');
$("#pnr1").val("");
$("#pnr2").val("");
return;
}
if((arr_month==dep_month && dep_date<arr_date) || (dep_month<arr_month))
{
alert('Invalid dates.Please check again.');
return;
}
//Test passed. Store in database;
URL="saveAcco.php";
parameters="name="+name+"&ins="+institution+"&year="+year+"&pnr="+pnr1+""+pnr2+"&dateArr="+arr_year+"-"+arr_month+"-"+arr_date+"&dateDep="+dep_year+"-"+dep_month+"-"+dep_date;
$.get(URL+"?"+parameters,function(data){
$("#msg_box").html(data);
if(data=="Your changes have been saved." || data=="Your data has been saved and is pending approval.")
{
$("#acco_status").html('<br/><b>Accomodation Approval Status</b> : <span style="padding:3px;background-color:#f4fb3c">Approval Pending</span><br/><br/>');
}
$("#msg_box").fadeIn("slow",function(){
setTimeout('fadeOutMsgBox();',3000);
});
});
}
I made a little changes to this function (added the variables 'mobile_num' and 'train_num', included 'if' conditions to make sure the user enters numbers only and made changes to the jQuery get function) that which resulted in the following code:
function check_acco_form()
{
//Personal Information
var name=$("#name").val();
var institution=$("#institution").val();
var year=$("#year").val();
//Contact Information
var mobile_num=$("#mobile").val();
//PNR Data
var pnr1=$("#pnr1").val();
var pnr2=$("#pnr2").val();
//Train Number
var train_num=$("#trainnum").val();
// Arrival date info
var arr_year=$("#arr_year").val();
var arr_month=$("#arr_month").val();
var arr_date=$("#arr_date").val();
//Departure date info
var dep_year=$("#dep_year").val();
var dep_month=$("#dep_month").val();
var dep_date=$("#dep_date").val();
var numericExpression = /^[0-9]+$/;
//Name, institution and year must not be empty.
if(name=="" || institution=="" || year=="")
{
alert("One or more fields are empty.");
return;
}
//PNR can be empty but if entered must be all numbers
if(pnr1!="" and pnr2!="")
{
if(!pnr1.match(numericExpression) || !pnr2.match(numericExpression))
{
alert("A PNR number consists of 10 digits only. Please enter again.");
$("#pnr1").val("");
$("#pnr2").val("");
return;
}
if(pnr1.length!=3 || pnr2.length!=7)
{
alert('Invalid PNR Number.');
$("#pnr1").val("");
$("#pnr2").val("");
return;
}
}
//Train number can be empty but if entered must be all numbers
if(train_num!="")
{
if(!train_num.match(numericExpression))
{
alert("Train number must consits of digits only");
$("#trainnum").val("");
return;
}
}
//Mobile num can be empty but must be all numbers
if(mobile_num!="")
{
if(!mobile_num.match(numericExpression))
{
alert("Invalid mobile number");
$("#mobile_num").val("");
return;
}
if(mobile_num.length!=10)
{
alert('A mobile number consists of 10 digits.Please enter again.');
return;
}
}
if((arr_month==dep_month && dep_date<arr_date) || (dep_month<arr_month))
{
alert('Departure date cannot be before arrival date.Please check again.');
return;
}
//Test passed. Store in database;
URL="saveAcco.php";
parameters="name="+name+"&ins="+institution+"&year="+year+"&pnr="+pnr1+""+pnr2+"&dateArr="+arr_year+"-"+arr_month+"-"+arr_date+"&dateDep="+dep_year+"-"+dep_month+"-"+dep_date+"&mobile="+mobile_num+"&train_num="+train_num;
$.get(URL+"?"+parameters,function(data){
$("#msg_box").html(data);
if(data=="Your changes have been saved." || data=="Your data has been saved and is pending approval.")
{
$("#acco_status").html('<br/><b>Accomodation Approval Status</b> : <span style="padding:3px;background-color:#f4fb3c">Approval Pending</span><br/><br/>');
$("#acco_letter_print").html('Download accomodation letter here');
$("#acco_letter_print").fadeIn();
}
$("#msg_box").fadeIn("slow",function(){
setTimeout('fadeOutMsgBox();',3000);
});
}); //End of get function
}
After the changes, suddenly all functions in the js file of this function have stopped working including this function. On searching the forum , I found this discussion : JavaScript function causing all other functions not to work inside js file which says that the error may be due to use of reserved words. However , I can't find any reserved words used as variables in my code. Any ideas what may the problem?
You have this in there:
if(pnr1!="" and pnr2!="")
It should be:
if(pnr1!="" && pnr2!="")
Any syntactical errors like this will cause the entire thing to fail, be sure to check your error console for things like this, they'll quickly point out the cause.
As an aside, try not to pass a string to setTimeout() as well, pass the function reference directly, changing this:
setTimeout('fadeOutMsgBox();',3000);
To this:
setTimeout(fadeOutMsgBox,3000);
This will give less issues, and allow the function to be anywhere in scope, it doesn't have to be global (like it would with a string).