Javascript - Включить кнопку «Отправить», когда все входные данные действительны

Question

Итак, у меня есть форма с несколькими вводами (имя и фамилия, имя пользователя, день рождения, пароль и электронная почта) с некоторыми условиями проверки, которые я сделал, например, так:

function checkfnlname(field) { 
curr = document.getElementById(field).value; 
if (curr.length > 0) { 
    updateCSSClass(field, 1); 
    return true; 
} 
else { 
    updateCSSClass(field, 0); 
    return false; 
}} 

Это изменяет цвет и возвращает true. Я вызываю эту функцию, используя onKeyUp="". Теперь я хочу сделать кнопку «Отправить» отключенной, пока все поля не будут завершены и не будут проверены функциями там. Я написал эту функцию:

function formvalid() { 
if (checkfnlname('fname') && && (all other fields)) { 
    document.getElementByID("submitinput").disabled = false; 
} 
else { 
    document.getElementByID("submitinput").disabled = true; 
} 
return 1;} 

Но я понятия не имею, как/где называть его. (Я пробовал много вещей, которые я нашел, но ничего не сработало) Правильно ли это? если да, то как я могу назвать эту функцию?

Answer 1

Вам нужно вызвать функцию проверки в событиях.

// For example 
<input type="text" onkeyup="validateForm()"> 
<select onchange="validateForm()"></select> 

Второй способ:

Вместо того, чтобы использовать кнопку отправки, используйте обычную кнопку и вызвать функцию, которая проверяет ваши формы предметов.

// Into the form or anywhere you want 
<button type="button" onclick="validateForm()">Submit</button> 

function validateForm() { 
    // Code to validate the form items 
    // if validated, send the form 

    // For example submitting a form with javascript 
    document.getElementById("myForm").submit(); 
} 

Answer 2

Это просто вызовите кнопку включения/выключения функции на в пределах вашей функции проверки типа/значение, что-то вроде this-

function checkfnlname(field) { 

    //here you can perform input check 
    curr = document.getElementById(field).value; 
    if (curr.length > 0) { 
     updateCSSClass(field, 1); 
     return true; 
    } 
    else { 
     updateCSSClass(field, 0); 
     return false; 
    } 
    // to check button validations 
    formvalid(); 
} 

Идя таким образом, каждый раз, когда вы вводите в форме это будет проверьте, соответствует ли условие для кнопки или нет, и будет функционировать соответственно.!

Answer 3

Мой подход:

function updateCSSClass(a, b) { 
 

 
} 
 

 
function checkfnlname(field) { 
 
    curr = document.getElementById(field).value; 
 
    if (curr.length > 0) { 
 
    updateCSSClass(field, 1); 
 
    return true; 
 
    } else { 
 
    updateCSSClass(field, 0); 
 
    return false; 
 
    } 
 
} 
 
window.onload = function() { 
 
    // disable submit 
 
    document.getElementById('submit').setAttribute('disabled', 'disabled'); 
 

 
    // attach the keyup event to each input 
 
    [].slice.call(document.querySelectorAll('form input:not([type="submit"])')).forEach(function (element, index) { 
 
    element.addEventListener('keyup', function (e) { 
 
     // compute the number of invalid fields 
 
     var invalidFields = [].slice.call(document.querySelectorAll('form input:not([type="submit"])')).filter(function (element, index) { 
 
     return !checkfnlname(element.id); 
 
     }); 
 
     if (invalidFields.length == 0) { 
 
     // reenable the submit if n. of invalid inputs is 0 
 
     document.getElementById('submit').removeAttribute('disabled'); 
 
     } else { 
 
     // disable submit because there are invalid inputs 
 
     document.getElementById('submit').setAttribute('disabled', 'disabled'); 
 
     } 
 
    }, false); 
 
    }); 
 
}

<form action="http://www.google.com"> 
 
    First name:<br> 
 
    <input type="text" name="firstname" id="firstname"><br> 
 
    Last name:<br> 
 
    <input type="text" name="lastname" id="lastname"><br> 
 
    User name:<br> 
 
    <input type="text" name="username" id="username"><br> 
 
    Birthday:<br> 
 
    <input type="date" name="birthday" id="birthday"><br> 
 
    Password:<br> 
 
    <input type="password" name="password" id="password"><br> 
 
    email:<br> 
 
    <input type="email" name="email" id="email"><br> 
 
    <input type="submit" value="submit" id="submit"> 
 
</form>

Answer 4

Проще всего было бы назвать formvalid()onkeyup для каждого поля. Эта функция проверяет каждое поле и показывает кнопку, если они действительны.

Это должно выполнить эту работу, хотя она не очень эффективна. Трудно проверять каждое поле каждый раз, когда вы вводите что-либо в любом поле. Пример: когда вы начинаете с первого входа, нет смысла проверять последнее.

Вместо этого у вас может быть функция проверки, которая обновляет глобальную логическую переменную, когда поле имеет действительные данные, а затем функцию проверки для проверки булевых элементов вместо вызова функции проверки. Затем onkeyup в каждом поле вы должны позвонить как по отдельности (сначала проверить, затем проверить).

Что-то вроде:

validFields=[]; 
function checkField(field) { 
    if (conditionIsMet) validFields[validFields.length]=field; 
} 
function validateForm() { 
    if (validFields.length==numberOfFields) ... 
} 

и

<input type="text" name="field1" value="" onkeyup="checkfield(this.name);validateForm()" />