I have to show my customized alert(designed by modal) when user want to leave current page. It prompt yes or no buttons. If user click yes, I want to return false(ie shouldn't leave the page). If user click no, I want to return true(ie leave the page).
I've tried lots of solutions, but nothing helped me.
ionViewCanLeave(): boolean {
if (this.operationMode == undefined) {
if (this.cycleMode == "AA") {
if (
this.oroficeLevel != this.oroficeLevelInitial ||
this.name != this.nameInitial ||
this.scheduleMode != this.scheduleModeInitial
) {
let modal = this.modalCtrl.create(AlertPage, {
message: "Save Changes?"
});
modal.onDidDismiss(data => {
if (data == "yes") {
return false;
} else {
return true;
}
});
modal.present();
}
} else if (this.cycleMode == "CC") {
if (
this.oroficeLevel != this.oroficeLevelInitial ||
this.name != this.nameInitial ||
this.scheduleMode != this.scheduleModeInitial
) {
let modal = this.modalCtrl.create(AlertPage, {
message: "Save Changes?"
});
modal.onDidDismiss(data => {
if (data == "yes") {
return false;
} else {
return true;
}
});
modal.present();
}
}
}
}
Related
I have some problem when I check the function validation, I need when checking all the cassis is true hide the parent div * errors message *
var error_pass = false;
$('#pass').focusout(function(){
check_pass();
error_pass = false;
if(error_pass !== true){
console.log('its showing!');
}else{
$('.test').fadeOut('522');
}
});
function check_pass() {
var fpass= $('#pass').val();
switch(error_pass = true){
case(fpass.length < 6 ? $('#pass-error-message3').css('color','red'):$('#pass-error-message3').css('color','green') ):
$('#pass-error-message3').show();
case(fpass.search(/(?=.[a-z])(?=.*[A-Z])/) == -1 ? $('#pass-error-message4').css('color','red') : $('#pass-error-message4').css('color','green')):
$('#pass-error-message4').show();
case(fpass.search(/\d/) == -1 ? $('#pass-error-message2').css('color','red'):$('#pass-error-message2').css('color','green')):
$('#pass-error-message2').show();
default:break;
}
}
Use if else statements like this
function validation() {
var error = false;
if (fpass.length < 6) {
error = true;
$('#pass-error-message3').css('color', 'red').show();
} else {
$('#pass-error-message3').css('color', 'green');
}
if (fpass.search(/(?=.[a-z])(?=.*[A-Z])/) == -1) {
error = true;
$('#pass-error-message4').css('color', 'red').show();
} else {
$('#pass-error-message4').css('color', 'green')
}
if(fpass.search(/\d/) == -1){
error = true;
$('#pass-error-message2').css('color','red').show();
}else{
$('#pass-error-message2').css('color','green');
}
if(error === false){
hideParentDiv(); // Here hide the div
}
}
Much cleaner approach
How would I determine if there's a draw? ( begginer coder problems)
I can identify who's the winner but can't seem to figure out how to implement the draw part! please help
heres my code not the prettiest, let me know how I can improve
var player = 1;
$('.box').on('click', function(event) {
alert('add symbol here');
var boxSelected = $(this);
$("#goAgain").click(function(event) {
location.reload();
});
if (boxSelected.hasClass('exes') || boxSelected.hasClass('ohs')) {
alert('Sorry, that has already been taken!');
} else {
if (player === 1) {
boxSelected.addClass('exes');
if (checkIfPlayerWon('exes')) {
alert('Congrats! Player ' + player + 'has won the game!');
} else {
player = 2;
}
} else {
boxSelected.addClass('ohs');
if (checkIfPlayerWon('ohs')) {
alert('Congrats! Player ' + player + 'has won the game!');
} else {
player = 1;
}
}
}
});
function checkIfPlayerWon(symbol) {
if ($('.sq1').hasClass(symbol) && $('.sq2').hasClass(symbol) && $('.sq3').hasClass(symbol)) {
return true;
} else if ($('.sq4').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq6').hasClass(symbol)) {
return true;
} else if ($('.sq7').hasClass(symbol) && $('.sq8').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq1').hasClass(symbol) && $('.sq4').hasClass(symbol) && $('.sq7').hasClass(symbol)) {
return true;
} else if ($('.sq2').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq8').hasClass(symbol)) {
return true;
} else if ($('.sq3').hasClass(symbol) && $('.sq6').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq1').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq3').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else {
return false;
}
}
});
If you have a class .square which all the squares have, then you can run a forEach loop over that class like $(.square).forEach(function(){..., which checks if the square is empty. If none of the squares are empty then a boolean game_still_on would be false and from that, after your syncronous loop has completed you would initiate the draw-game routine.
I have multiple required field controls on my aspx form.
Now what I want is to show the validation message on button click if anything is not filled or checked.
I want it on one message in JQuery.
Here is my JQuery code:-
$(document).ready(function () {
$('#btnSave').click(function (e) {
if (!validateTitle() || !validatePrefix() || !validateTextBoxes()) {
e.preventDefault();
}
});
function validateTitle() {
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
alert("Please enter the text in other title");
return false;
}
return true;
} else {
alert('Please select the title');
return false;
}
}
function validatePrefix() {
if ($("#ddlPrefix").val() > "0") {
if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
alert("Please enter the text in other prefix");
return false;
}
return true;
} else {
alert('Please select the prefix');
return false;
}
}
function validateTextBoxes() {
if ($("#txtFirstName").val() === "") {
alert('First name is required');
return false;
}
if ($("#txtMiddleName").val() === "") {
alert('Middle name is required');
return false;
}
if ($("#txtLastName").val() === "") {
alert('Last name is required');
return false;
}
if ($("#txtFatherName").val() === "") {
alert('Father name is required');
return false;
}
if ($("#txtCurrentCompany").val() === "") {
alert('Current company is required');
return false;
}
if ($("#txtDateofJoin").val() === "") {
alert('Date is required');
return false;
}
if ($("#txtCurrentExp").val() === "") {
alert('Current Experience is required');
return false;
}
return true;
}
});
Try below code
var ErrArr = [];
$(document).ready(function () {
$('#btnSave').click(function (e) {
e.preventDefault();
validateTitle();
validatePrefix();
validateTextBoxes();
if(ErrArr.length > 0) {
alert(ErrArr.join("\n"));
ErrArr = [];
return false;
}
});
function validateTitle() {
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
ErrArr.push("Please enter the text in other title");
}
} else {
ErrArr.push('Please select the title');
}
}
function validatePrefix() {
if ($("#ddlPrefix").val() > "0") {
if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
ErrArr.push("Please enter the text in other prefix");
}
} else {
ErrArr.push('Please select the prefix');
}
}
function validateTextBoxes() {
if ($("#txtFirstName").val() === "") {
ErrArr.push('First name is required');
}
if ($("#txtMiddleName").val() === "") {
ErrArr.push('Middle name is required');
}
if ($("#txtLastName").val() === "") {
ErrArr.push('Last name is required');
}
if ($("#txtFatherName").val() === "") {
ErrArr.push('Father name is required');
}
if ($("#txtCurrentCompany").val() === "") {
ErrArr.push('Current company is required');
}
if ($("#txtDateofJoin").val() === "") {
ErrArr.push('Date is required');
}
if ($("#txtCurrentExp").val() === "") {
ErrArr.push('Current Experience is required');
}
}
});
Instead of using alert all the time, save the message to a variable instead.
Then alert that message after all tests are done.
$(document).ready(function () {
var message = "";
$('#btnSave').click(function (e) {
message = "";
if (!validateTitle() || !validatePrefix() || !validateTextBoxes()) {
e.preventDefault();
alert(message);
}
});
function validateTitle() {
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
message += "Please enter the text in other title\n";
return false;
}
return true;
} else {
message += 'Please select the title\n';
return false;
}
}
....
});
Use the following fiddle [JSFiddle][1] , this will basically push all the error messages into an array and can show the results.
Please update if this works for you as i am not aware of markup
Just a simple trick you can do
just use a string variable for messages appending and counter.
$(document).ready(function () {
var Messages;
var counter=0;
$('#btnSave').click(function (e) {
validateTitle();
validatePrefix();
validateTextBoxes();
if(counter > 0)
{
alert(Messages);
e.preventDefault();
counter=0;
}
});
function validateTitle() {
debugger;
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
Messages += "Please enter the text in other title";
Messages += "\n";
counter ++;
}
} else {
Messages += 'Please select the title';
Messages += "\n";
counter ++;
}
}
function validatePrefix() {
debugger;
if ($("#ddlPrefix").val() > "0") {
if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
Messages += "Please enter the text in other prefix";
Messages += "\n";
counter ++;
}
} else {
Messages += 'Please select the prefix';
Messages += "\n";
counter ++;
}
}
function validateTextBoxes() {
debugger;
if ($("#txtFirstName").val() === "") {
Messages += 'First name is required';
Messages += "\n";
counter ++;
}
if ($("#txtMiddleName").val() === "") {
Messages += 'Middle name is required';
Messages += "\n";
counter ++;
}
if ($("#txtLastName").val() === "") {
Messages += 'Last name is required';
Messages += "\n";
counter ++;
}
if ($("#txtFatherName").val() === "") {
Messages += 'Father name is required';
Messages += "\n";
counter ++;
}
if ($("#txtCurrentCompany").val() === "") {
Messages += 'Current company is required';
Messages += "\n";
counter ++;
}
if ($("#txtDateofJoin").val() === "") {
Messages += 'Date is required';
Messages += "\n";
counter ++;
}
if ($("#txtCurrentExp").val() === "") {
Messages += 'Current Experience is required';
Messages += "\n";
counter ++;
}
}
});
Just update counter and impliment check if check > 0 show message
(alert)
it will benefit you two things
User dont need to click each time and get alert.. dont need to
return false.user Must know at once what erors are in form.
Secondly code is simple/Simple logic.
Try this.
$(document).ready(function () {
var Errors = [];
$('#btnSave').click(function (e) {
if (!validateTitle() || !validatePrefix() || !validateTextBoxes()) {
if(Errors.length > 0) {
alert(Errors.join("\n"));
}
e.preventDefault();
}
});
function validateTitle() {
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
Errors.push("Please enter the text in other title");
}
return true;
} else {
Errors.push('Please select the title');
}
}
function validatePrefix() {
if ($("#ddlPrefix").val() > "0") {
if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
Errors.push("Please enter the text in other prefix");
}
return true;
} else {
Errors.push('Please select the prefix');
}
}
function validateTextBoxes() {
if ($("#txtFirstName").val() === "") {
Errors.push('First name is required');
}
if ($("#txtMiddleName").val() === "") {
Errors.push('Middle name is required');
}
if ($("#txtLastName").val() === "") {
Errors.push('Last name is required');
}
if ($("#txtFatherName").val() === "") {
Errors.push('Father name is required');
}
if ($("#txtCurrentCompany").val() === "") {
Errors.push('Current company is required');
}
if ($("#txtDateofJoin").val() === "") {
Errors.push('Date is required');
}
if ($("#txtCurrentExp").val() === "") {
Errors.push('Current Experience is required');
}
return true;
}
});
Add perfect separation in each message to differentiate it.
I have the following code to validate if any of three checkboxes are not checked:
function checkBoxes(form) {
if (
form.checkbox1.checked == false ||
form.checkbox2.checked == false ||
form.checkbox3.checked == false)
{
alert ('must fill in the last 3 checkboxes');
return false;
} else {
return true;
}
}
And called once submitted via a submit button:
<form method="post" onsubmit="return checkBoxes(this);">`
It doesn't work, why exactly?
<script type="text/javascript">
function checkBoxes(form) {
if (
form.checkbox1.checked == null ||
form.checkbox2.checked == null ||
form.checkbox3.checked == null)
{
alert ('checkbox is null');
return false;
}
else if (
form.checkbox1.checked == false ||
form.checkbox2.checked == false ||
form.checkbox3.checked == false)
{
alert ('must fill in the last 3 checkboxes');
return false;
} else {
return true;
}
}
</script>
Add that to know if a checkbox is null
I recently filled out a form and when I got to the phone number textBox I noticed some really cool things going on. As I entered my number, general phone symbols were getting added automatically. Example:
I start entering my area code '555'
and my input was changed to 1 (555)
to test what just happened I backspaced on the ) and it quickly added it back in.
So my question is, how do I get this input to happen?
I use a javascript library called automask - you dont see the mask but it wont let you type anything outside the mask
for instance if your mask is ###-###-#### then any other characters are ignored (ie not 0-9) and the dashes are put in automatically.
I can post the library if you would like to take a look at
example of implementation
<input type=text name=ssn onkeypress="return autoMask(this,event, '###-##-####');">
// email kireol at yahoo.com
// autoMask - an adaption of anyMask
//
// this will force #'s, not allowing alphas where the #'s are, and auto add -'s
function autoMask(field, event, sMask) {
//var sMask = "**?##?####";
var KeyTyped = String.fromCharCode(getKeyCode(event));
var targ = getTarget(event);
keyCount = targ.value.length;
if (getKeyCode(event) < 32)
{
return true;
}
if(keyCount == sMask.length && getKeyCode(event) > 32)
{
return false;
}
if ((sMask.charAt(keyCount+1) != '#') && (sMask.charAt(keyCount+1) != 'A' ) && (sMask.charAt(keyCount+1) != '~' ))
{
field.value = field.value + KeyTyped + sMask.charAt(keyCount+1);
return false;
}
if (sMask.charAt(keyCount) == '*')
return true;
if (sMask.charAt(keyCount) == KeyTyped)
{
return true;
}
if ((sMask.charAt(keyCount) == '~') && isNumeric_plusdash(KeyTyped))
return true;
if ((sMask.charAt(keyCount) == '#') && isNumeric(KeyTyped))
return true;
if ((sMask.charAt(keyCount) == 'A') && isAlpha(KeyTyped))
return true;
if ((sMask.charAt(keyCount+1) == '?') )
{
field.value = field.value + KeyTyped + sMask.charAt(keyCount+1);
return true;
}
return false;
}
function getTarget(e) {
// IE5
if (e.srcElement) {
return e.srcElement;
}
if (e.target) {
return e.target;
}
}
function getKeyCode(e) {
//IE5
if (e.srcElement) {
return e.keyCode
}
// NC5
if (e.target) {
return e.which
}
}
function isNumeric(c)
{
var sNumbers = "01234567890";
if (sNumbers.indexOf(c) == -1)
return false;
else
return true;
}
function isNumeric_plusdash(c)
{
var sNumbers = "01234567890-";
if (sNumbers.indexOf(c) == -1)
return false;
else
return true;
}
function isAlpha(c)
{
var lCode = c.charCodeAt(0);
if (lCode >= 65 && lCode <= 122 )
{
return true;
}
else
return false;
}
function isPunct(c)
{
var lCode = c.charCodeAt(0);
if (lCode >= 32 && lCode <= 47 )
{
return true;
}
else
return false;
}
If this was an aspx page, they were probably using the AJAX Control Toolkit MaskedEdit Extender. There is also the Masked Input plugin for jQuery.