We Keep Coding

Javascript change variable from another function

Hello I have this function right here:
function formCheck() {
var valid = true;
var error;
resetBorders('.customer-create-form');
$('.customer-create-form :input[required]').each(function() {
if ($(this).val().length == 0) {
valid = false;
error = "* Alle felter skal udfyldes";
$(this).css('border-color', 'red');
}
});
if ($('input[name="postal_code"]').val().length != 0 && !$.isNumeric($('input[name="postal_code"]').val())) {
valid = false;
error = "* Ugyldig post nummer";
$('input[name="postal_code"]').css('border-color', 'red');
}
if (valid == true) {
return true;
} else {
$('.error-firm-settings-1-form').html(error);
}
return false;
}
I want to set this into a function for itself, but when I do it and update the valid to false, the formCheck() does not register it, and it continues. How do I do so it set it to false in the formCheck() function.
if ($('input[name="postal_code"]').val().length != 0 && !$.isNumeric($('input[name="postal_code"]').val())) {
valid = false;
error = "* Ugyldig post nummer";
$('input[name="postal_code"]').css('border-color', 'red');
}

How to validate input is required in jquery SmartWizard when content load from ajax?

i have success implemented jquery SmartWizard for validate input type text, but when input text load from ajax the validate is not working.
code to validate:
// Toolbar extra buttons
var btnFinish = $('<button></button>').text('Simpan')
.addClass('btn btn-info')
.on('click', function() {
if( !$(this).hasClass('disabled')) {
var elmForm = $("#myForm");
if(elmForm){
elmForm.validator('validate');
var elmErr = elmForm.find('.has-error');
if(elmErr && elmErr.length > 0) {
alert('Oops we still have error in the form');
return false;
} else {
alert('Great! we are ready to submit form');
elmForm.submit();
return false;
}
}
}
});
How do i validate the input?

i use this code, it work.
var btnFinish = $('<button></button>').text('Finish')
.addClass('btn btn-finish')
.on('click', function(){
if( !$(this).hasClass('disabled')){
var elmForm = $("#myForm");
if(elmForm){
elmForm.validator('validate');
var elmErr = elmForm.find('.has-error');
if(elmErr && elmErr.length >0){
alert('Oops, sorry');
return false;
} else {
alert('work! ');
elmForm.submit();
return false;
}
}
}
});

CSS Float Form Pattern for WooCommerce Forms

I'm attempting to implement the float label pattern (https://webdesign.tutsplus.com/articles/implementing-the-float-label-form-pattern--webdesign-16407) for my WooCommerce forms.
The checkout from is here - https://dev.joshkern.co/checkout/.
You'll first need to add a product/service from here - https://dev.joshkern.co/wordpress-maintenance/. You'll see the form isn't working as it should. What am I missing?
This is my javascript:
(function($) {
$(document).ready(function(){
// Test for placeholder support
$.support.placeholder = (function(){
var i = document.createElement('input');
return 'placeholder' in i;
})();
// Hide labels on page load if placeholders are supported
if ($.support.placeholder) {
$('.woocommerce form .form-row').each(function(){
$(this).addClass('js-hide-label');
});
$('.woocommerce form .form-row').find('input, textarea').on('keyup blur focus', function(e){
// Cache our selectors
var $this = $(this),
$parent = $this.parent();
// Add or remove classes
if (e.type == 'keyup') {
if ($this.val() == '') {
$parent.addClass('js-hide-label');
}
else {
$parent.removeClass('js-hide-label');
}
}
else if (e.type == 'blur') {
if( $this.val() == '' ) {
$parent.addClass('js-hide-label');
}
else {
$parent.removeClass('js-hide-label').addClass('js-unhighlight-label');
}
}
else if (e.type == 'focus') {
if( $this.val() !== '' ) {
$parent.removeClass('js-unhighlight-label');
}
}
});
}
});
})(jQuery);

Prevent submit until all required fields (input,select..) are populated

How can I prevent my form from submitting until all required fields are populated? Required fields could be input, select, etc.
Below is my current code which is not working. Basically after I click on the submit button I would like to iterate through each field in the form which has tag='required' and if all fields are populated/selected then allow form submit.
Thanks.
$("#submitButton").click(function (e) {
var submit = false;
var count = 0;
$('#Form input, #Form select').each(function () {
var id = $(this).attr('id');
var value = $('#' + id).val();
var tagValue = $('#' + id).attr('tag');
var isDisabled = $('#' + id).is(':disabled');
if (isDisabled == false) {
if ($('#' + id).is(':visible')) {
if (tagValue == 'required') {
if (id == 'email') {
validateEmail('#' + id);
}
if (id == 'phone') {
validatePhone('#' + id);
}
if ($('#' + id).hasClass("currency")) {
validateCurrency('#' + id);
}
if ($('#' + id).is('select')) {
if (value == '' || value == 'Unknown' || value == 'unassigned' || value == null) {
$('#' + id).css({
'border': '1px solid #F70D1A'
});
}
}
else if (value == "") {
$('#' + id).css({
'border': '1px solid #F70D1A'
});
}
if (value == '' || value == 'Unknown' || value == 'unassigned' || value == null) {
submit = false;
} else {
submit = true;
}
}
}
}
});
if (!submit) {
e.preventDefault();
}
});

Rather than attaching this event to the button click, you should attach it to the form on submit:
$('#Form').on('submit', function (e) {
//-- your current code should work fine, put it here
});
I went ahead and cleaned up your method:
$("#Form").on('submit', function (e) {
var submit = true;
//-- use find+filter to reduce the set of matched elements
$(this).find('input, select').filter('[tag="required"]:visible:enabled').each(function () {
var $this = $(this),
value = $this.val();
//-- switch for unique flags
switch ($this.attr('id')) {
case 'email': validateEmail($this); break;
case 'phone': validatePhone($this); break;
}
//-- continue parsing non-unique flags
if ($this.hasClass('currency')) validateCurrency($this);
if (!value || value === 'Unknown' || value === 'unassigned') {
$this.css('border', '1px solid #F70D1A');
submit = false;
}
});
if (!submit) {
e.preventDefault();
}
});
Things to note:
I removed all of the unnecessary ID-based lookups. This is a huge performance hit, and should be reduced to a single $(this) lookup which you should reuse.
I am currently passing $this to each validate method, so they will have to be updated accordingly.
Rather than iterating through all select/input fields, I reduced the matched elements first, cutting down on unnecessary code.
I simplified your logic to the best of my understanding based on the code provided.
I switched the method used on the submit flag. It now starts out as valid and will be set to false if any item fails the check.

$('#Form').on('submit', function (e) {
$.each(this.find("[tag='required']"),function(i,item)
{
validation logic goes here.
....
}
)});

Jquery validate form

I am trying to validate my form on submit and if the input's are all filled in they submit to register.php
My problem being it only works if all inputs are blank - otherwise it errors - I'm just trying to check if any of those fields are blank before submiting
function submitform() {
if ($('#name, #email, #user, #address, #phone').val().length === 0) {
$(this).addClass('warning');
} else {
alert("form submitted");
}
}

You cant do a .val on an array. It should be
function submitform(){
var warning = false;
$('#name, #email, #user, #address, #phone').each(function() {
$(this).val().length === 0){
warning = true;
return;
}
});
if(warning) {
$(this).addClass('warning');
} else {
alert("form submitted");
}
}

you need to check each one of them with the each function in jquery, or a for loop.
$('#name, #email, #user, #address, #phone').each(function(){
if ($(this).val().length === 0){
$(this).addClass('warning');
} else {
alert("form submitted");
}
});
Here's the same example with a for
var formElements = $('#name, #foo');
for (i = 0 ; i < formElements.length ; i++)
{
if ( $(formElements[i]).val().length === 0 )
$(this).addClass('warning');
else {
alert("form submitted");
}
}
​

function formSubmit() {
var pass = true;
jQuery.each( jQuery('#form :input'), function( key, value ) {
if(!this.value && jQuery(this).attr('class :contains("required")')) {
if (jQuery(this).siblings('.error').length === 0 && jQuery(this).type != 'submit') {
jQuery(this).after('<label class="error"><span class="form-required">*</span> Required</label>');
}
pass = false;
} else {
jQuery(this).siblings('.error').remove();
}
});
if (pass === true) {
document.getElementById('form').submit();
}
}