I have a function that check Username in a form,parent function i check if there are empty field, and now i wanna pass usernameValidat() in inside onSubmit() to check if it match with my username validation. Can anyone give me the answer to solve this issue please
onSubmit() {
var text = "Please insert ";
for (let i = 0; i < Constant.REGISTER_INFOS.length; i++) {
if (Constant.REGISTER_INFOS[i].info == "") {
text = text + Constant.REGISTER_INFOS[i].title.toLowerCase() + ", ";
}
}
alert(text);
},
usernameValidate() {
if (Constant.REGISTER_INFOS[0].info.length < 4) {
alert("Username is too short");
return false;
}
},
Assuming that this is part of a Vue app, so something like:
const App = new Vue({
methods: {
onSubmit() {
var text = "Please insert ";
for (let i = 0; i < Constant.REGISTER_INFOS.length; i++) {
if (Constant.REGISTER_INFOS[i].info == "") {
text = text + Constant.REGISTER_INFOS[i].title.toLowerCase() + ", ";
}
}
alert(text);
},
usernameValidate() {
if (Constant.REGISTER_INFOS[0].info.length < 4) {
alert("Username is too short");
return false;
}
},
}
});
Then you want to call another method using the this keyword, to access other methods on this Vue instance.
So onSubmit() might look like:
onSubmit() {
var text = "Please insert ";
for (let i = 0; i < Constant.REGISTER_INFOS.length; i++) {
if (Constant.REGISTER_INFOS[i].info == "") {
text = text + Constant.REGISTER_INFOS[i].title.toLowerCase() + ", ";
}
}
this.usernameValidate();
alert(text);
},
There are some big issues with this code though, and that won't actually do anything of note, as nothing is being done with the return value.
A better way to handle this would be to:
Return true or false from usernameValidate, depending on whether or not it's successful, and check it in if statement.
Change the signature of the usernameValidate method to take an argument. This means that we can re-use this functionality with any input, making it a lot more flexible.
With these two changes, we end up with the following:
const App = new Vue({
methods: {
onSubmit() {
var text = "Please insert ";
for (let i = 0; i < Constant.REGISTER_INFOS.length; i++) {
if (Constant.REGISTER_INFOS[i].info == "") {
text = text + Constant.REGISTER_INFOS[i].title.toLowerCase() + ", ";
}
}
if (this.usernameValidate(Constant.REGISTER_INFOS[0].info) {
alert(text);
return true;
}
alert("Registration Failed!");
return false;
},
usernameValidate(username) {
if (username.length < 4) {
alert("Username is too short");
return false;
}
return true;
},
}
});
Hopefully that clears a few things up, and can give you a little more insight in to programming in general.
Having said all of that, I would highly recommend learning JavaScript from scratch, before getting stuck in to frameworks (which VueJS is) and things like that. Understanding the core principles of programming, conditional logic, etc., will make you much more competent in the long run, and just grabbing at code snippets from StackOverflow will just lead to you pulling your hair out, and being stuck on a problem for days at a time.
Related
I am using a for loop to check whether the user has attached the required documents or not. Based on the success I am submitting it to the server. I would like to make it simple. Even the validation passes it should submit the data only once instead of many times.
I have put the submit inside the loop for each success it will submit the data.
can anyone suggest me how I can make it simpler?
function validateFile () {
if (vm.imageURIs.length > 0) {
for (var i = 0; i < vm.imageURIs.length; i++) {
var data = vm.imageURIs[i];
if (data.img && data.img.length > Config.ENV.FILE_SIZE) {
var fileName = data.name || vm.i18n.documentNumber + (i + 1);
Toast.message($translate.instant('DOCUMENTMAXSIZE', { name: fileName }));
} else if (data.document_required === true && data.img.length === 0) {
Toast.message($translate.instant('DOCUMENTREQUIRED', {name: data.name}));
} else {
applyScheme();
}
}
} else {
applyScheme();
}
}
Try putting
break;
after
applyScheme();
Reference: https://www.w3schools.com/js/js_break.asp
I'm getting an array of Strings, and if the array has items I want to do one thing and if not I want to do the other. I'm not sure how to check if the array is empty of not. Also when stepping through my code in chrome debugger even if the array has items in it the length is still 0 so I can't use formErrors.length > 0.
Here's my code for getting the errors. This works fine and returns an array of error strings or an empty array:
var formErrors = validateFormData(formData);
function validateFormData(data) {
var errors = [];
if (data["title"].length == 0) {
errors["title"] = "Project title required";
}
if (data["client"].length == 0) {
errors["client"] = "Client name required";
}
if (data["date"].length == 0) {
errors["date"] = "Date required";
} else if (!isValidDateFormat(data["date"])) {
errors["date"] = "Date format invalid - Format: dd/mm/yyyy";
}
if (data["status"] == "") {
errors["status"] = "Please select current status for this project";
}
if (data["type"] == "") {
errors["type"] = "Please select a project type";
}
if (data["extras"].length == 0) {
errors["extras"] = "You must select at least one extra for this project";
}
return errors;
}
Then I want to do one thing if there's no errors and another if there is. But this is the bit that won't work for me.
if (formErrors !== {}) {
displayFormErrors(formErrors);
event.preventDefault();
}
else {
clearForm();
}
I've tried multiple ways and nothing has worked so far. Any help is appreciated, thank you!
EDIT
I can't use the .length on the array cause the length is 0 even when it has data.
Screenshot of chrome debugger
I'm slightly confused about what people are asking sorry, i'm not an expert here is my full code to get a better understanding of what i'm trying to do.
$(document).ready(function () {
$('#submit').on("click", onSubmitForm);
function onSubmitForm(event) {
clearErrorMessages();
var formData = getFormData();
var formErrors = validateFormData(formData);
if (formErrors) {
displayFormErrors(formErrors);
event.preventDefault();
}
else {
clearForm();
// Do other stuff
}
}
function clearForm() {
$('#title').val("");
$('#client').val("");
$('#date').val("");
$('#status').val("planning");
$('#description').val("");
$('.type').prop('checked', false);
$('.extra').prop('checked', false);
$('#title').focus();
}
function clearErrorMessages() {
$(".uk-text-danger").html("");
}
function getFormData () {
var data = [];
data["title"] = $('#title').val();
data["client"] = $('#client').val();
data["date"] = $('#date').val();
data["status"] = $('select#status option:selected').val();
data["description"] = $('#description').val();
if ($("input[name='type']:checked").length > 0) {
data["type"] = $("input[name='type']:checked").val();
}
else {
data["type"] = "";
}
data["extras"] = [];
$.each($("input[name='extras[]']:checked"), function(index, radio) {
data["extras"].push(radio.value);
});
return data;
}
function validateFormData(data) {
var errors = [];
if (data["title"].length == 0) {
errors["title"] = "Project title required";
}
if (data["client"].length == 0) {
errors["client"] = "Client name required";
}
if (data["date"].length == 0) {
errors["date"] = "Date required";
} else if (!isValidDateFormat(data["date"])) {
errors["date"] = "Date format invalid - Format: dd/mm/yyyy";
}
if (data["status"] == "") {
errors["status"] = "Please select current status for this project";
}
if (data["type"] == "") {
errors["type"] = "Please select a project type";
}
if (data["extras"].length == 0) {
errors["extras"] = "You must select at least one extra for this project";
}
return errors;
}
function displayFormErrors(errors) {
for (var field in errors) {
var errorElementId = field + "Error";
$('#' + errorElementId).html(errors[field]);
}
} });
Sorry if this is too much i'm not sure what else to do.
An empty array, string or object is "falsy" in JavaScript.
That is, you can pass the array, string or object directly into the if conditional and it will run depending on if something is in there or not.
if ([]) {
// this will never run
}
if ('') {
// this won't run either
}
if ({}) {
// nor will this
}
var errors = {}; inside the validateFormData function.
And then compare the the object like this.
if (JSON.stringify( formErrors ) !== '{}') { //do something}else { //do something}
Where are you verifying if the formErrors is empty? This verification (the if-else) should be inside the function which submits the form.
Also try using:
if (formErrors.length > 0)
instead of:
if (formErrors !== {})
Here's the code:
eventOverlap: function(stillEvent, movingEvent) {
console.log("I am overlapping something");
if (stillEvent.tags == ""|| movingEvent.tags == "") {
console.log("One of the events have no tag");
return true;
} else {
console.log("SE = " + stillEvent.tags + " ME = " + movingEvent.tags);
$.each( stillEvent.tags.split(','), function( key, value ) {
var index = $.inArray( value, movingEvent.tags.split(',') );
var result = "";
if( index == -1 ) {
console.log("Found no similar tags");
result =true;
} else {
console.log("Similar tags at index:"+index);
result =false;
}
return result;
});
}
}
What I'm trying to do, is when I drag an event above another day that contains an event as well, this function will compare the tags string they have (by splitting them) and looking at each individually.
If one or both of the events have no tags, it is allowed into the day.
Else, each of these are supposed to be compared per element
say X=["1","2","3"] and Y=["3","4","5"] both of these has 3, therefore it should return false. But if it finds no similar elements, like X = ["1"] and Y = ["2"] it should return true. False will disable eventOverlap, and true otherwise.
So I checked with the console. What's happening here is that even if it knows that there are no similar tags, eventOverlap is still not enabled. Only when the other event has no tag.
Might it be a flaw on my logic? Thanks!
What about something like this?
...
eventOverlap: function(stillEvent, movingEvent) {
if (stillEvent.tags == ""|| movingEvent.tags == "") {
console.log("One of the events have no tag");
return true;
} else {
for (i = 0; i<stillEvents.tags.length; i++){
for(j = 0;j<movingEvent.tags.length,j++) {
if (movingEvent.tags[j] == stillEvents.tags[i]){
return false;
}
}
}
return true;
}
}
...
I have scoured the other question/answer for this and implemented everything and I still cannot access the values of the object. Here's the code I am using:
function apply_voucher(voucher) {
var dates = $.parseJSON($("[name='dates']").val());
var voucher_yes_no = new Array();
var voucher_reduction = new Array();
if(voucher.length > 0)
{
$.each(dates, function(room_id, these_dates) {
$.post('/multiroom/check_voucher/'+voucher+'/'+room_id, function(result) {
if(result.result == 'ok') {
voucher_yes_no.push('yes');
voucher_reduction.push(result.voucher_reduction);
} else {
voucher_yes_no.push('no');
}
}, 'json');
});
// check if there are any yes's in the array
if('yes' in voucher_yes_no) {
console.log("no yes's");
} else {
console.log(voucher_reduction);
console.log(typeof voucher_reduction);
for (var prop in voucher_reduction) {
console.log(prop);
console.log(voucher_reduction[prop]);
if (voucher_reduction.hasOwnProperty(prop)) {
console.log("prop: " + prop + " value: " + voucher_reduction[prop]);
}
}
}
}
}
Apologies for the constant console logging - I'm just trying to track everything to make sure it's all doing what it should. The console output I get from this is below:
...which shows the object containing one value, "1.01" and my console.log of the typeof it to make sure it is actually an object (as I thought I was going mad at one point). After this there is nothing from inside the for-in loop. I have tried jquery's $.each() also to no avail. I can't understand why nothing I'm trying is working!
It does not work because the Ajax call is asynchronous!
You are reading the values BEFORE it is populated!
Move the code in and watch it magically start working since it will run after you actually populate the Array!
function apply_voucher(voucher) {
var room_id = "169";
var dates = $.parseJSON($("[name='dates']").val());
var voucher_reduction = new Array();
$.post('/multiroom/check_voucher/'+voucher+'/'+room_id, function(result) {
if(result.result == 'ok') {
voucher_reduction.push(result.voucher_reduction);
}
console.log(voucher_reduction);
console.log(typeof voucher_reduction);
for (var prop in voucher_reduction) {
console.log(prop);
console.log(voucher_reduction[prop]);
if (voucher_reduction.hasOwnProperty(prop)) {
console.log("prop: " + prop + " value: " + voucher_reduction[prop]);
}
}
}, 'json');
}
From what it looks like, you plan on making that Ajax call in a loop. For this you need to wait for all of the requests to be done. You need to use when() and then(). It is answered in another question: https://stackoverflow.com/a/9865124/14104
Just to say for future viewers that changing the way I did this to use proper deferred objects and promises, which blew my head up for a while, but I got there! Thanks for all the help, particularly #epascarello for pointing me in the right direction :) As soon as I started doing it this way the arrays began behaving like arrays again as well, hooray!
Here's the final code:
function apply_voucher(voucher) {
var booking_id = $("[name='booking_id']").val();
var dates = $.parseJSON($("[name='dates']").val());
if(voucher.length > 0) {
var data = []; // the ids coming back from serviceA
var deferredA = blah(data, voucher, dates); // has to add the ids to data
deferredA.done(function() { // if blah successful...
var voucher_yes_no = data[0];
var voucher_reduction = data[1];
if(voucher_yes_no.indexOf("yes") !== -1)
{
console.log("at least one yes!");
// change value of voucher_reduction field
var reduction_total = 0;
for(var i = 0; i < voucher_reduction.length; i++) {
reduction_total += voucher_reduction[i];
}
console.log(reduction_total);
}
else
{
console.log("there are no yes's");
}
});
}
}
function blah(data, voucher, dates) {
var dfd = $.Deferred();
var voucher_yes_no = new Array();
var voucher_reduction = new Array();
var cycles = 0;
var dates_length = 0;
for(var prop in dates) {
++dates_length;
}
$.each(dates, function(room_id, these_dates) {
$.post('/multiroom/check_voucher/'+voucher+'/'+room_id, function(result) {
if(result.result == 'ok') {
voucher_reduction.push(result.voucher_reduction);
voucher_yes_no.push('yes');
} else {
voucher_yes_no.push('no');
}
++cycles;
if(cycles == dates_length) {
data.push(voucher_yes_no);
data.push(voucher_reduction);
dfd.resolve();
}
}, 'json');
});
return dfd.promise();
}
Can you show how voucher_reduction is defined?
I am wondering where the second line of the debug output comes from, the one starting with '0'.
in this line:
console.log(vouncher_reduction[prop]);
^
The name of the variable is wrong (then) and probably that is breaking your code.
I think there are no problem with your loop.
But perhaps with your object.
Are you sure what properties has enumerable ?
Try to execute this to check :
Object.getOwnPropertyDescriptor(voucher_reduction,'0');
If it return undefined, the property was not exist.
Sorry for the lack of description in title, it's difficult to explain.
So I have a simple signup page and I made a bunch of functions in my code that check things such as the username length, make sure the passwords match, etc..
The problem is, if there is more than one error in the users input, it only displays one error at the bottom.
HEre is the JSfiddle: http://jsfiddle.net/LCBradley3k/xqcJS/19/
Javascript:
$('#join').on('click', function () {
var correct = true;
$('input[type="text"], input[type="password"]').each(function (indx) {
var $currentField = $(this);
if ($currentField.val() === '') {
$currentField.addClass('empty');
correct = false;
$currentField.one('keydown', function () {
$currentField.removeClass('empty');
});
} else {
$currentField.removeClass('empty');
}
});
function userLength() {
var x = $('input[name="user"]').val();
if (x.length < 6) {
$('#answer').html('Less than six characters.');
$('input[name="user"]').addClass('empty');
return false;
} else {
return true;
}
}
function passwordCheck() {
var x = $('input[name="password"]').val();
var y = $('input[name="passwordcheck"]').val();
if (x === y) {
return true;
} else {
$('#answer').html('Two different passwords');
$('input[name="password"], input[name="passwordcheck"]').addClass('empty');
return false;
}
}
function validateForm() {
var x = $('input[name="email"]').val();
if (x.indexOf('#') !== -1 && x.lastIndexOf(".") !== -1) {
return true;
} else {
$('#answer').html('Not a valid email');
$('input[name="email"]').addClass('empty');
return false;
}
}
if (correct) {
if (userLength()) {
if (passwordCheck()) {
if (validateForm()) {
$('#answer').html('Thank You!');
setTimeout(function () {
$('.inputs').hide("slide", {
direction: "up"
}, 1000);
}, 2000);
}
}
}
} else {
$('#answer').html('Please fill highlighted fields.');
}
});
You can see that all of them edit the #('#answer') div with .html(). But only one is displayed when there is more than one error. Once that error is fixed and the button is pressed, it will then display the next error. I want them all to be displayed in a list.
I created a fiddle that may be of some help. The idea is to create an array with the errors in it like so:
var errors = [];
errors.push("Error 1");
errors.push("Error 2");
As you step through the validation, every time an error is encountered you simply push the error string onto the array. When you get to the end of the validation you need to compile these errors into html like that can be appended to your $('#answer') element. In this case the items are compiled into an unordered list. You can change this to fit your needs.
var content = "<ul>";
for(var a = 0, len = errors.length; a < len; a++) {
content += "<li>" + errors[a] + "</li>";
}
content += "</ul>";
$('#answer').html(content);
The html is built dynamically and stored in the variable content. content is then appended to your html element that displays the errors (in your case answer).
You have 2 issues with doing what you want.
First, you are only continuing your checks if the first one passes, due to your nested if statements.
Second, you are replacing the #answer html with the message, which means even if you do each check, you will only see the results of the last one.
A simple fix would be to un-nest your if statements, and keep a variable that tracks the overall pass state. Secondly, instead of using .html(), use .append(), but make sure to clear out #answer before starting your checks.
correct &= checkFilled();
correct &= userLength();
correct &= passwordCheck();
correct &= validateForm();
if (correct) {
// ...
}
Fiddle: http://jsfiddle.net/jtbowden/9cFKW/
Note: I made your form filled check it's own function to work better with this method.
You can do some more fancy things, like pushing error messages on an array, and then checking the array for errors at the end and appending all of the messages, but this should get you started.