We Keep Coding

Text reversed on input

There is a email field where in if we access the site using chrome/IE/Firefox browser it works as expected, But if I access it using IPhone Safari browser the email field reverse the text I entered.
Example image here-
The code for the field Email is
<input
id="emal"
required
type="text"
maxlength="40"
onclick="this.focus();"
onfocus="if(this.value == this.dflt) { this.value='' }; this.onchange();"
onblur="if(this.value.length < 1) { this.value = this.dflt };"
onchange="this.ffoc = true; validate_email();"
onpaste="this.onchange();" oninput="this.onchange();"
onkeypress="this.onchange();">
Validation part of code -
function validate_email() {
if (document.loaded) {
$form[0].$emal.value = "";
$form[0].$emal.valid = null;
updateField($form[1].$emal, $form[1].$emal.value.replace(/\s/ig, ""));
if (isValidEmail($form[1].$emal.value) && $form[1].$emal.value != $form[
1].$emal.dflt) {
$form[0].$emal.value = $form[1].$emal.value;
$form[0].$emal.valid = true;
$form[1].$emal.setAttribute("valid", "true");
} else {
$form[1].$emal.setAttribute("valid", ($form[1].$emal.clik) ? ($form[
1].$emal.required) ? "false" : "warn" : "");
$form[0].$emal.valid = ($form[1].$emal.clik && !$form[1].$emal
.required) ? true : null;
}
$form[1].$emal.$wbox.style.display = ((/false|warn/i).test($form[1]
.$emal.getAttribute("valid"))) ? "block" : "none";
refresh();
}
}
function isValidEmail(str) {
var val = false;
if (str != null) {
var ddStr =
"aero%asia%biz%cat%com%coop%edu%gov%info%int%jobs%mil%mobi%museum%name%net%org%pro%tel%travel%ac%ad%ae%af%ag%cf%cg%ai%al%am%an%ao%aq%ar%as%at%au%aw%ax%az%ba%bb%bd%be%bf%bg%bh%bi%bj%bm%bn%bo%br%bs%bt%bv%bw%by%bz%ca%cc%cd%ch%ci%ck%cl%cm%cn%co%cr%cs%cu%cv%cx%cy%cz%dd%de%dj%dk%dm%do%dz%ec%ee%eg%eh%er%es%et%eu%fi%fj%fk%fm%fo%fr%ga%gb%gd%ge%gf%gg%gh%gi%gl%gm%gn%gp%gq%gr%gs%gt%gu%gw%gy%hk%hm%hn%hr%ht%hu%id%ie%il%im%in%io%iq%ir%is%it%je%jm%jo%jp%ke%kg%kh%ki%km%kn%kp%kr%kw%ky%kz%la%lb%lc%li%lk%lr%ls%lt%lu%lv%ly%ma%mc%md%me%mg%mh%mk%ml%mm%mn%mo%mp%mq%mr%ms%mt%mu%mv%mw%mx%my%mz%na%nc%ne%nf%ng%ni%nl%no%np%nr%nu%nz%om%pa%pe%pf%pg%ph%pk%pl%pm%pn%pr%ps%pt%pw%py%qa%re%ro%rs%ru%tw%tz%ua%ug%uk%us%uy%uz%va%vc%ve%vg%vi%vn%vu%wf%ws%ye%yt%yu%za%zm%zw",
ckStr = (ddStr).split("%");
if (str.length > 5 && (
/^\w+([\.\-\'\+]?\w+)*#\w+([\.\-]?\w+)*(\.\w+)+$/i).test(str)) {
for (var i = 0; i < ckStr.length; i++) {
if (str.substring(str.lastIndexOf(".") + 1) == ckStr[i]) {
val = true;
break;
}
}
}
}
return val
}
I really appreciate helping me sorting this or providing any references.

html5 phone input validation wont submit even tho the pattern is correct

I have some java script to help the user with the phone number and prevent the form from being submitted in till the field has a valid phone number.
How ever even with a valid number it keeps telling me to use the format thats already predetermined. What am I doing worng im going to assume it has something to do with the pattern.
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS
factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
var ua = navigator.userAgent,
iPhone = /iphone/i.test(ua),
chrome = /chrome/i.test(ua),
android = /android/i.test(ua),
caretTimeoutId;
$.mask = {
//Predefined character definitions
definitions: {
'9': "[0-9]",
'a': "[A-Za-z]",
'*': "[A-Za-z0-9]"
},
autoclear: true,
dataName: "rawMaskFn",
placeholder: '_'
};
$.fn.extend({
//Helper Function for Caret positioning
caret: function(begin, end) {
var range;
if (this.length === 0 || this.is(":hidden") || this.get(0) !== document.activeElement) {
return;
}
if (typeof begin == 'number') {
end = (typeof end === 'number') ? end : begin;
return this.each(function() {
if (this.setSelectionRange) {
this.setSelectionRange(begin, end);
} else if (this.createTextRange) {
range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', begin);
range.select();
}
});
} else {
if (this[0].setSelectionRange) {
begin = this[0].selectionStart;
end = this[0].selectionEnd;
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
begin = 0 - range.duplicate().moveStart('character', -100000);
end = begin + range.text.length;
}
return { begin: begin, end: end };
}
},
unmask: function() {
return this.trigger("unmask");
},
mask: function(mask, settings) {
var input,
defs,
tests,
partialPosition,
firstNonMaskPos,
lastRequiredNonMaskPos,
len,
oldVal;
if (!mask && this.length > 0) {
input = $(this[0]);
var fn = input.data($.mask.dataName)
return fn?fn():undefined;
}
settings = $.extend({
autoclear: $.mask.autoclear,
placeholder: $.mask.placeholder, // Load default placeholder
completed: null
}, settings);
defs = $.mask.definitions;
tests = [];
partialPosition = len = mask.length;
firstNonMaskPos = null;
mask = String(mask);
$.each(mask.split(""), function(i, c) {
if (c == '?') {
len--;
partialPosition = i;
} else if (defs[c]) {
tests.push(new RegExp(defs[c]));
if (firstNonMaskPos === null) {
firstNonMaskPos = tests.length - 1;
}
if(i < partialPosition){
lastRequiredNonMaskPos = tests.length - 1;
}
} else {
tests.push(null);
}
});
return this.trigger("unmask").each(function() {
var input = $(this),
buffer = $.map(
mask.split(""),
function(c, i) {
if (c != '?') {
return defs[c] ? getPlaceholder(i) : c;
}
}),
defaultBuffer = buffer.join(''),
focusText = input.val();
function tryFireCompleted(){
if (!settings.completed) {
return;
}
for (var i = firstNonMaskPos; i <= lastRequiredNonMaskPos; i++) {
if (tests[i] && buffer[i] === getPlaceholder(i)) {
return;
}
}
settings.completed.call(input);
}
function getPlaceholder(i){
if(i < settings.placeholder.length)
return settings.placeholder.charAt(i);
return settings.placeholder.charAt(0);
}
function seekNext(pos) {
while (++pos < len && !tests[pos]);
return pos;
}
function seekPrev(pos) {
while (--pos >= 0 && !tests[pos]);
return pos;
}
function shiftL(begin,end) {
var i,
j;
if (begin<0) {
return;
}
for (i = begin, j = seekNext(end); i < len; i++) {
if (tests[i]) {
if (j < len && tests[i].test(buffer[j])) {
buffer[i] = buffer[j];
buffer[j] = getPlaceholder(j);
} else {
break;
}
j = seekNext(j);
}
}
writeBuffer();
input.caret(Math.max(firstNonMaskPos, begin));
}
function shiftR(pos) {
var i,
c,
j,
t;
for (i = pos, c = getPlaceholder(pos); i < len; i++) {
if (tests[i]) {
j = seekNext(i);
t = buffer[i];
buffer[i] = c;
if (j < len && tests[j].test(t)) {
c = t;
} else {
break;
}
}
}
}
function androidInputEvent(e) {
var curVal = input.val();
var pos = input.caret();
if (oldVal && oldVal.length && oldVal.length > curVal.length ) {
// a deletion or backspace happened
checkVal(true);
while (pos.begin > 0 && !tests[pos.begin-1])
pos.begin--;
if (pos.begin === 0)
{
while (pos.begin < firstNonMaskPos && !tests[pos.begin])
pos.begin++;
}
input.caret(pos.begin,pos.begin);
} else {
var pos2 = checkVal(true);
var lastEnteredValue = curVal.charAt(pos.begin);
if (pos.begin < len){
if(!tests[pos.begin]){
pos.begin++;
if(tests[pos.begin].test(lastEnteredValue)){
pos.begin++;
}
}else{
if(tests[pos.begin].test(lastEnteredValue)){
pos.begin++;
}
}
}
input.caret(pos.begin,pos.begin);
}
tryFireCompleted();
}
function blurEvent(e) {
checkVal();
if (input.val() != focusText)
input.change();
}
function keydownEvent(e) {
if (input.prop("readonly")){
return;
}
var k = e.which || e.keyCode,
pos,
begin,
end;
oldVal = input.val();
//backspace, delete, and escape get special treatment
if (k === 8 || k === 46 || (iPhone && k === 127)) {
pos = input.caret();
begin = pos.begin;
end = pos.end;
if (end - begin === 0) {
begin=k!==46?seekPrev(begin):(end=seekNext(begin-1));
end=k===46?seekNext(end):end;
}
clearBuffer(begin, end);
shiftL(begin, end - 1);
e.preventDefault();
} else if( k === 13 ) { // enter
blurEvent.call(this, e);
} else if (k === 27) { // escape
input.val(focusText);
input.caret(0, checkVal());
e.preventDefault();
}
}
function keypressEvent(e) {
if (input.prop("readonly")){
return;
}
var k = e.which || e.keyCode,
pos = input.caret(),
p,
c,
next;
if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {//Ignore
return;
} else if ( k && k !== 13 ) {
if (pos.end - pos.begin !== 0){
clearBuffer(pos.begin, pos.end);
shiftL(pos.begin, pos.end-1);
}
p = seekNext(pos.begin - 1);
if (p < len) {
c = String.fromCharCode(k);
if (tests[p].test(c)) {
shiftR(p);
buffer[p] = c;
writeBuffer();
next = seekNext(p);
if(android){
//Path for CSP Violation on FireFox OS 1.1
var proxy = function() {
$.proxy($.fn.caret,input,next)();
};
setTimeout(proxy,0);
}else{
input.caret(next);
}
if(pos.begin <= lastRequiredNonMaskPos){
tryFireCompleted();
}
}
}
e.preventDefault();
}
}
function clearBuffer(start, end) {
var i;
for (i = start; i < end && i < len; i++) {
if (tests[i]) {
buffer[i] = getPlaceholder(i);
}
}
}
function writeBuffer() { input.val(buffer.join('')); }
function checkVal(allow) {
//try to place characters where they belong
var test = input.val(),
lastMatch = -1,
i,
c,
pos;
for (i = 0, pos = 0; i < len; i++) {
if (tests[i]) {
buffer[i] = getPlaceholder(i);
while (pos++ < test.length) {
c = test.charAt(pos - 1);
if (tests[i].test(c)) {
buffer[i] = c;
lastMatch = i;
break;
}
}
if (pos > test.length) {
clearBuffer(i + 1, len);
break;
}
} else {
if (buffer[i] === test.charAt(pos)) {
pos++;
}
if( i < partialPosition){
lastMatch = i;
}
}
}
if (allow) {
writeBuffer();
} else if (lastMatch + 1 < partialPosition) {
if (settings.autoclear || buffer.join('') === defaultBuffer) {
// Invalid value. Remove it and replace it with the
// mask, which is the default behavior.
if(input.val()) input.val("");
clearBuffer(0, len);
} else {
// Invalid value, but we opt to show the value to the
// user and allow them to correct their mistake.
writeBuffer();
}
} else {
writeBuffer();
input.val(input.val().substring(0, lastMatch + 1));
}
return (partialPosition ? i : firstNonMaskPos);
}
input.data($.mask.dataName,function(){
return $.map(buffer, function(c, i) {
return tests[i]&&c!=getPlaceholder(i) ? c : null;
}).join('');
});
input
.one("unmask", function() {
input
.off(".mask")
.removeData($.mask.dataName);
})
.on("focus.mask", function() {
if (input.prop("readonly")){
return;
}
clearTimeout(caretTimeoutId);
var pos;
focusText = input.val();
pos = checkVal();
caretTimeoutId = setTimeout(function(){
if(input.get(0) !== document.activeElement){
return;
}
writeBuffer();
if (pos == mask.replace("?","").length) {
input.caret(0, pos);
} else {
input.caret(pos);
}
}, 10);
})
.on("blur.mask", blurEvent)
.on("keydown.mask", keydownEvent)
.on("keypress.mask", keypressEvent)
.on("input.mask paste.mask", function() {
if (input.prop("readonly")){
return;
}
setTimeout(function() {
var pos=checkVal(true);
input.caret(pos);
tryFireCompleted();
}, 0);
});
if (chrome && android)
{
input
.off('input.mask')
.on('input.mask', androidInputEvent);
}
checkVal(); //Perform initial check for existing values
});
}
});
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<?php
session_start();
$token= md5(uniqid());
$_SESSION['delete_customer_token']= $token;
session_write_close();
?>
<!DOCTYPE html>
<head>
<title>index</title>
<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$.mask.definitions['~'] = "[+-]";
$("#phone").mask("1 (999) 999-9999");
$("input").blur(function() {
$("#info").html("Unmasked value: " + $(this).mask());
}).dblclick(function() {
$(this).unmask();
});
});
</script>
</head>
<body>
<form id="msform" method="post" action=""/>
<input type="hidden" name="token" value="<?php echo $token; ?>"/>
<input type="hidden" name="miles" value=""/>
<div id="formwrap">
<div id="ftx1">FIRST NAME</div>
<input type="text" name="fname" class="box" maxlength="40" min="9" max="40" placeholder=""/>
</div>
<div id="formwrap">
<div id="ftx1">LAST NAME</div>
<input type="text" name="lname" class="box" maxlength="40" min="9" max="40" placeholder=""/>
</div>
<div id="formwrap">
<div id="ftx1">BUSINESS NAME:</div>
<input id="busname" name="busname" class="element text medium" type="text" maxlength="40" value="" placeholder=""/>
</div>
<div id="formwrap">
<div id="ftx1">TYPE OF BUSINESS:*</div>
<input id="bustype" type="bustype" name="bustype" size="" maxLength="64"
placeholder=""
title="">
</div>
<div id="formwrap">
<div id="ftx1">EMAIL: *</div>
<input id="email" type="" name="email" size="" maxLength="64"
placeholder=""
title="Please provide only a email address" novalidate/>
</div>
<div id="formwrap">
<div id="ftx1">PHONE NUMBER: *</div>
<input id="phone" name="phone" class="element text medium" maxlength="" value="" placeholder="PHONE NUMBER" type="tel" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" title="Phone Number Format:1 (614) 000-0000" />
</div>
<br><br><br><br>
<input id="submit" class="button_text" type="submit" name="submit" value="SUBMIT" />
<div id="error"></div>
<h2>contact you within 24h. Thank You!</h2>
</form>
</body>
</html>

Your regular expression and field mask combination is incorrect.
[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4} will never match because (a) your mask is configured for North American-style phone numbers (it will match phone numbers in the same format as +91(12)3456-7890), and (b) your mask is not configured with a + at the beginning of the input.
You may be looking for something similar to the following to validate the field itself:
1 \(\d{3}\) \d{3}\-\d{4}
Regex101

convert enter to tab, work with hidden fields

I have a script that converts "Enter" to "Tab", and it works great until I hit a hidden field on a form.
So, is there any way to detect the hidden field, and still use the script(in IE & firefox)?
<script type="text/javascript">
function tabE(obj, e) {
var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz
if (e.keyCode == 13) {
var ele = document.forms[0].elements;
for (var i = 0; i < ele.length; i++) {
var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other
if (obj == ele[i]) {
ele[q].focus();
break
}
}
return false;
}
}
</script>

Change your code to look like the following:
<script type="text/javascript">
function tabE(obj, e) {
var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz
if (e.keyCode == 13) {
var ele = document.forms[0].elements;
for (var i = 0; i < ele.length; i++) {
var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other
if (obj == ele[i] && $(ele[q]).is(":visible")) {
ele[q].focus();
break
}
}
return false;
}
}
</script>
I just added a check to make sure the element you're about to focus is visible (not hidden).
EDIT: If you want to skip hidden fields entirely, use the below code.
function tabE(obj, e) {
var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz
var self = $(obj),
form = self.parents('form:eq(0)'),
focusable, next;
if (e.keyCode == 13) {
focusable = form.find('input,a,select,button,textarea').filter(':visible');
next = focusable.eq(focusable.index(obj) + 1);
if (!next.length) {
next = focusable.first();
}
next.focus();
return false;
}
}
Fiddle:
https://jsfiddle.net/mwatz122/0zqzzmc1/

My proposal is full js:
function tabE(obj, e) {
var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz
if (e.keyCode == 13) {
var ele = document.forms[0].elements;
for (var i = 0; i < ele.length; i++) {
var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other
if (obj == ele[i]) {
var style = window.getComputedStyle(ele[q]);
while (style.display == 'none' || style.visibility != 'visible' || ele[q].type == 'hidden') {
q = (q == ele.length - 1) ? 0 : q + 1; // if last element : if any other
style = window.getComputedStyle(ele[q]);
}
ele[q].focus();
break
}
}
return false;
}
}
window.onload = function() {
var inp = document.getElementsByTagName("input")
for(i=0; i<inp.length; i++) {
inp[i].addEventListener("keyup", function(e) {
tabE(this, e);
});
}
}
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<input type="text" name="myhidden" style="visibility: hidden">
<input type="hidden" name="myhidden1">
<input type="text" name="myhidden2" style="display: none">
</form>

Tic-Tac-Toe Loop

I am making a game of tic-tac toe in javascript. I have laid out some of what I believe to be the basic building blocks:
var board = [
0, 0, 0,
0, 0, 0,
0, 0, 0
];
gameOn = true;
player1Move = true;
counter = 0;
player1 = [];
player2 = [];
var ask = console.log(prompt('where would you like to go?'));
var drawBoard = function(){
console.log(" A " + (board[0]) + "| B " + (board[1]) + "| C " + (board[2]));
console.log(" ------------- ");
console.log(" D " + (board[3]) + "| E " + (board[4]) + "| F " + (board[5]));
console.log(" ------------- ");
console.log(" G " + (board[6]) + "| H " + (board[7]) + "| I " + (board[8]));
console.log(" ------------- ");
};
var solutions = [
(board[0] && board[1] && board[2]) || (board[3] && board[4] && board[5]) ||
(board[6] && board[7] && board[8]) || (board[0] && board[3] && board[6]) ||
(board[1] && board[4] && board[7]) || (board[2] && board[5] && board[8]) ||
(board[0] && board[4] && board[8]) || (board[2] && board[4] && board[6])
];
while (gameOn === true){
// for loop for game logic
for (var i = 0 ; i < 9; i++){
if (player1Move === true) {
player1.push(ask);
drawBoard();
player1Move = false;
} else if (player1Move === false){
player2.push(ask);
drawBoard();
player1Move = true;
} else if ((player1 || player2) === solutions){
gameOn = false;
console.log((player1 || player2) + "wins!");
} else {
gameOn = false;
console.log("Tie Game!");
}
}
}
I know that the syntax of my main loop is incorrect. Why can't I do what is currently written? If you had this existing code, what type of loop setup would you use to accomplish this? Sorry if this seems not specific enough, I am just lost in the logic of it all!
With this existing loop all I am trying to do is go through and prompt the 2 users 9 times(because maximum moves = 9) in total for now. Once that works than I will keep adding more game logic into it. Why can't I get the prompt to come up 9 times? The current result is that it prompts me once, prints out the board 9 times and false after all of it.
This just needs to work in a terminal window for now too by the way.

I changed your code as little as possible, but a few things are different, which I am explaining bit by bit.
var board = {
A: null,
B: null,
C: null,
D: null,
E: null,
F: null,
G: null,
H: null,
I: null
};
gameOn = true;
player1Move = true;
var drawBoard = function(){
console.log(" A " + (board.A || '') + "| B " + (board.B || '') + "| C " + (board.C || ''));
console.log(" ------------- ");
console.log(" D " + (board.D || '') + "| E " + (board.E || '') + "| F " + (board.F || ''));
console.log(" ------------- ");
console.log(" G " + (board.G || '') + "| H " + (board.H || '') + "| I " + (board.I || ''));
console.log(" ------------- ");
};
var solutions = function() {
return (board.A && (board.A == board.B && board.A == board.C))
|| (board.D && (board.D == board.E && board.D == board.F))
|| (board.G && (board.G == board.H && board.G == board.I));
};
drawBoard();
var currentPlayer;
while (gameOn === true){
// for loop for game logic
for (var i = 0 ; i < 9; i++){
if (solutions()){
console.log(currentPlayer + " wins!");
gameOn = false;
break;
}
//else {
// gameOn = false;
// console.log("Tie Game!");
//}
currentPlayer = 'Player 1';
if(!player1Move)
currentPlayer = 'Player 2';
var ask = prompt(currentPlayer + ': where would you like to go (A or B or C or ..)?');
if(ask == 'exit') {
gameOn = false;
break;
}
if (player1Move === true) {
//player1.push(ask);
board[ask] = 'X';
drawBoard();
player1Move = false;
} else if (player1Move === false){
board[ask] = 'O';
drawBoard();
player1Move = true;
}
}
}
It's not completely finished, but then that's something you can do afterwards, and probably you didn't want me to do it all for you.
This all works in a Chrome console.
There were a couple of basic things that were holding you back:
var ask = console.log(prompt('where would you like to go?')); should be var ask = prompt(currentPlayer + ': where would you like to go?'); - your version was filling ask with null.
This prompt was also in the wrong place: it needs to be in the loop, and after drawBoard(), so that the player has something to look at.
I've changed the board from an array into an object, so that player answers like 'A' refer directly to the object fields. And that way the player arrays could be removed.
The solutions() function needs completing, as you can see, and there may be a neater way of doing this.
I added the possibility of writing 'exit' in the prompt, otherwise there's no way of exiting the game early.
I didn't finish the 'Tie game!' code.

Make sure you understand the global object is, and what window.prompt is, and what console.log is in your context. It is absolutely necessary to get to know a debugger for your environment. In Chrome it's called Developer Tools.
window.prompt is not very useful in code sandboxes like jsfiddle, or the Stack overflow bulit-in ones. I suggest using HTML for your user interface.
function init() {
trapForm();
trapInput();
toggleCurrentUser();
askUser();
}
var game = [
[null,null,null],
[null,null,null],
[null,null,null]
];
var trapInput = function() {
// capture input and use to to create a play in the game
document.querySelector('#go').addEventListener('click',function(ev) {
var position = document.querySelector('#square').valueAsNumber;
if (position < 10 && position > 0) {
// render X or O to the HTML
var td = document.querySelectorAll('#t3 td')[position-1];
td.innerHTML = currentUser;
// modify the corresponding game array
var row = Math.floor( (position-1) / 3 );
var col = ( (position+2) % 3) ;
game[row][col] = currentUser;
// this helps us visualize what's happening
debug(game);
checkGameStatus();
toggleCurrentUser();
} else {
debug({"msg":"illegal move"});
}
});
};
var trapForm = function() {
// prevent form from submitting
var f = document.querySelector('#f');
f.addEventListener('submit',function(ev) {
ev.preventDefault();
trapInput();
});
};
;(function(window,document,undefined){
"use strict";
function init() {
trapForm();
trapInput();
toggleCurrentUser();
askUser();
}
var currentUser = 'Y';
var toggleCurrentUser = function(){
if (currentUser === 'X') {
currentUser = 'Y';
} else {
currentUser = 'X';
}
document.querySelector('#currentuser').value = currentUser;
};
var isVirginal = function(game) {
return game.every(function(row) {
return row.every(function(cell) { return (cell === null); });
});
};
var isStaleMate = function(game){
return game.every(function(row){
return row.every(function(cell){
return (cell === 'X' || cell === 'Y');
});
});
};
var horizontalWinner = function(game) {
var r = false;
return game.some(function(row){
var firstletter = row[0];
if (firstletter === null) {
return false;
} else {
return row.every(function(cell){
return ( cell !== null && cell === firstletter);
});
}
});
};
var verticalWinner = function(game) {
var r = false;
for (var i = 0; i < 4; i++) {
if (game[0][i] === null) {
continue;
}
if (game[0][i] === game[1][i] && game[1][i] === game[2][i]) {
r = game[0][i];
break;
}
};
return r;
};
var diagonalWinner = function(game) {
var r = false;
if (game[0][0] !== null && (game[0][0] === game[1][1] === game[2][2])) {
r = game[0][0];
}
if (game[0][2] !== null && (game[0][2] === game[1][1] === game[2][0])) {
r = game[0][2];
}
return r;
};
var checkGameStatus = function(){
var r = 'unknown';
if (isVirginal(game)) {
r = 'Virginal Game';
} else {
r = 'In Play';
}
if (isStaleMate(game)) {
r = 'Stale Mate';
}
if (diagonalWinner(game)){
r = 'Diagonal Winner: ' + diagonalWinner(game);
}
if (verticalWinner(game)) {
r = 'vertical Winner: ' + verticalWinner(game);
}
if (horizontalWinner(game)) {
r = 'Horizontal Winner: ' + horizontalWinner(game);
}
document.querySelector('#status').value = r;
};
var debug = function(stuff) {
document.querySelector('#debug').innerHTML = JSON.stringify(stuff);
};
var game = [
[null,null,null],
[null,null,null],
[null,null,null]
];
var trapInput = function() {
// capture input and use to to create a play in the game
document.querySelector('#go').addEventListener('click',function(ev) {
var position = document.querySelector('#square').valueAsNumber;
if (position < 10 && position > 0) {
// render X or O to the HTML
var td = document.querySelectorAll('#t3 td')[position-1];
td.innerHTML = currentUser;
// modify the corresponding game array
var row = Math.floor( (position-1) / 3 );
var col = ( (position+2) % 3) ;
game[row][col] = currentUser;
// this helps us visualize what's happening
debug(game);
checkGameStatus();
toggleCurrentUser();
} else {
debug({"msg":"illegal move"});
}
});
};
var trapForm = function() {
// prevent form from submitting
var f = document.querySelector('#f');
f.addEventListener('submit',function(ev) {
ev.preventDefault();
trapInput();
});
};
document.addEventListener('DOMContentLoaded',init);
})(window,document);
#t3 {
font-family: "Courier New";
font-size: xx-large;
}
#t3 td {
border: 1px solid silver;
width: 1em;
height: 1em;
vertical-align: middle;
text-align: center;
}
#f {
position: relative;
}
#f label, input, button {
float: left;
width: 200px;
}
#f label, button {
clear: left;
}
hr {
clear: both;
visibility: hidden;
}
<form id="f">
<label for="currentuser">Current User</label>
<input type="text" readonly id="currentuser" name="currentuser" />
<label for="square">What Square (1-9)?</label>
<input type="number" step="1" min="1" max="9" id="square" name="square" />
<label for="status">Game Status</label>
<input type="text" readonly id="status" name="status" value="Virgin Game" />
<button type="button" id="go">make move</button>
</form>
<hr />
<table id="t3">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<pre id="debug"></pre>

Problems with form validations

<div id="form">
<form method="post" action="register1.aspx" onsubmit="return validateForm();"name="register1" >
<h1>
Register to exess the site</h1>
<input type="text" name="firstname" class=" br"/>
<em>First name</em><br />
<span id="firstnmsg"></span><br />
<input type="text" name="lastname" class=" br" /><em>Last name</em><br />
<span id="lastnmsg"></span><br />
<input type="text" name="username" class=" br" /><em>username</em><br>
<span id="usermsg"></span><br />
<input type="password" name="password" class=" br" /><em>password</em><br />
<input type="password"name="password1" class=" br" /><em>Confirm password</em>
<span id="pass1msg"></span><br />
<input type="text" name="email" class=" br"/><em>Email!</em><br />
<span id="emailmsg"></span><br />
<select name="sex">
<option>Please select a Gender</option>
<option>Male</option>
<option>Female</option>
<em>Gender</em>
</select><br />
<input type="submit" name="submit" value="Register " onclick="return validateForm();" />
<input type="reset" name="reset" value="Reset" onclick="return resetMsg();"/>
</form>
<span> <%=Session["regstatus"] %></span>
</div>
<div id="log_in">
<h1><em>log in</em></h1>
<form action="WebForm2.aspx"method="post" name="log_in" onsubmit="return validateloginform"><br />
<span id="usernamemsg"><%=Session["usernamemsg"] %> </span><input type="text" name="username_1" class="br" /><em>Username</em><br />
<span id="passwordmsg"><%=Session ["passwordmsg"] %></span><input type="password" name="password_1" class="br" /><em>Password</em><br />
<input type="submit" name="submit2" onclick=" validateloginform"/>
</form>
</div>
<script type="text/javascript">
function isEmpty(str) {
return (str.length == 0);
}
function isNumeric(str) {
var c = true;
for (var i = 0; i < str.length; i++) {
c = !(isNaN(str[i]));
}
return c;
}
function isValid(str) {
var badChar = "\\;:!##$%^&*()-_=+`~<>?[]{}|/,.";
for (var l = 0; l < str.length; l++) {
for (var c = 0; c < badChar.length; c++) {
if (str[l] == badChar[c]) {
return true;
}
if (str[l] == " " || str[l] == "\"" || str[l] == "\'") {
return true;
}
}
}
return false;
}
function isShort(str) {
return (str.length < 3);
}
//Reset Error Messages Function -->
function resetMsg() {
document.getElementById("firstnmsg").innerHTML = "";
document.getElementById("lastnmsg").innerHTML = "";
document.getElementById("usermsg").innerHTML = "";
document.getElementById("passwordmsg").innerHTML = "";
document.getElementById("pssword1msg").innerHTML = "";
document.getElementById("emailmsg").innerHTML = "";
document.getElementById("BdateMsg").innerHTML = "";
document.getElementById("UnameMsg").innerHTML = "";
document.getElementById("PwdMsg").innerHTML = "";
document.getElementById("LoginError").innerHTML = "";
return true;
}
//Main Sign Up Form Validation Function -->
function validateForm() {
resetMsg();
var val = true;
//First Name Validation ---------------------------------------->
if (isEmpty(register1.firstname.value)) {
document.getElementById("firstnmsg").innerHTML = " Empty";
val = false;
}
else {
if (isNumeric(register1.firstname.value) || isValid(signup.firstname.value)) {
document.getElementById("firstnmsg").innerHTML = " Letters Only";
val = false;
}
else {
if (isShort(register1.firstname.value)) {
document.getElementById("firstnmsg").innerHTML = " Too Short";
val = false;
}
}
}
//Last Name Validation ------------------>
if (isEmpty(register1.lastname.value)) {
document.getElementById("lastnmsg").innerHTML = " Empty";
val = false;
}
else {
if (isNumeric(register1.lastname.value) || isValid(signup.lastname.value)) {
document.getElementById("lastnmsg").innerHTML = " Letters Only";
val = false;
}
else {
if (isShort(register1.lastname.value)) {
document.getElementById("lastnmsg").innerHTML = " Too Short";
val = false;
}
}
}
//Username Validation --------------------------------------------->
if (isEmpty(register1.username.value)) {
document.getElementById("usermsg").innerHTML = " Empty";
val = false;
}
else {
if (!isNumeric(register1.username.value)) {
document.getElementById("usermsg").innerHTML = " Use Numbers";
}
else {
if (isShort(register1.username.value)) {
document.getElementById("usermsg").innerHTML = " Too Short";
val = false;
}
}
}
//Password Validation ----------------------------------------------->
if (isEmpty(register1.password1.value)) {
document.getElementById("Password1Msg").innerHTML = " Empty";
val = false;
}
else {
if (isValid(register1.password.value)) {
document.getElementById("Password1Msg").innerHTML = " Invalid";
}
else {
if (register1.password.value == register1.password1.value) {
if (signup.password1.value.length < 6 && signup.password1.value != "") {
document.getElementById("pass1msg").innerHTML = " Too Short";
val = false;
}
}
else {
document.getElementById("pass1msg").innerHTML = " Don't Match";
val = false;
}
}
}
//Email Validation -------------------------------------->
var EmailField = document.forms["register1"]["email"].value;
var atpos = EmailField.indexOf("#");
var dotpos = EmailField.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= EmailField.length) {
document.getElementById("emailmsg").innerHTML = " Invalid Email";
val = false;
}
if (EmailField == null || EmailField == "") {
document.getElementById("emailmsg").innerHTML = " Empty";
val = false;
}
//Main Login Validation Function -->
function validateLoginForm() {
resetMsg();
var val = true;
//Username Validation
if (isEmpty(log_in.username.value)) {
document.getElementById("usernamemsg").innerHTML = " Empty";
val = false;
}
//Password Validation
if (isEmpty(log_in.password.value)) {
document.getElementById("passwordmsg").innerHTML = " Empty";
val = false;
}
return val;
}
</script>
The validations won't work and I dont know why. This is a school project.
my main problem is that the script isnt running when im submiting the form ,when there even some errors at the form(what the user submits) it still goes to the next page and no innerHtml massage is shown.

Here, I went through your code, refractored a lot of it, wrote out some comments on how to improve it.
What stops the form from submitting is returning false. You're returning a variable called val, and if there is an error that variable is set to false, thus returning false and preventing the form from submitting.
I recommend taking the JS and putting it in your text editor and reading through everything. You should learn a good bit.
Here it is: http://jsfiddle.net/2x5LU/
I just did first name cause I have to work now, but you should be able to work off of this.
function validateForm(){
resetMsg();
var val = true;
if(isEmpty(firstName.value)){
firstNameMsg = 'Empty';
val = false;
}else if(isNumeric(firstName.value)){
firstNameMsg = 'Letters Only';
val = false;
}else if(isShort(firstName.value)){
firstNameMsg = 'Too Short';
val = false;
}
return val;
}