양식에 this 템플릿을 사용하고 있습니다. 텍스트 입력의 경우 입력을 검증 할 기회를 제공합니다 (단순 : 비어 있으면 빨간색 상자, 그렇지 않으면 녹색 상자). 그러나 모든 필수 입력란이 적어도 비어 있지 않은 경우에만 제출 버튼 (아래 마크 업)을 클릭 할 수있게하고 싶습니다.필수 입력란이 비어있는 동안 버튼이 비활성화되었습니다.
<button type="submit" name="finish" class="waves-effect waves-light btn">
감사
사용 oninput
var inputs = document.querySelectorAll('input'),
button = document.querySelector('button');
addListenerMulti(inputs, 'keyup change', function() {
if (valid()) {
button.removeAttribute('disabled');
}
else {
button.setAttribute('disabled', 'disabled');
}
});
function valid() {
var valid = true;
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].validity.valid) {
valid = false;
}
}
return valid;
}
function addListenerMulti(el, s, fn) {
var col = el.length ? el : [el];
var evts = s.split(' ');
for (var k = 0; k < col.length; k++) {
for (var i = 0, iLen = evts.length; i < iLen; i++) {
col[k].addEventListener(evts[i], fn, false);
}
}
}<form>
<input type="text" required /><br />
<input type="text" required /><br />
<button disabled>Submit</button>
</form>HTML
<form id="frm">
<input type="text" name="input1" oninput="testFinish();" />
<input type="text" name="input2" oninput="testFinish();" />
<button type="submit" name="finish" disabled onsubmit="alert('SUBMITTED')">Finish</button>
</form>
JAVASCRIPT
function testFinish(){
var frm = document.getElementById('frm');
if (frm['input1'].value && frm['input2'].value)
frm['finish'].disabled = false;
}
@ doe 당신이 알고있는 일반적인 것이 아닙니다. –
내가 지금 내 바탕 화면에 아니에요하지만 난 당신이 당신이 comment..don에서 더 많은 지원에 대한 언급이 필요 ..if '해야 할 일을 단지 기본 레이아웃을 제공하고있어 진드기를 잊지 마라.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Can Validate Input</h1>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>질문과 관련이 없습니다. 양식이 유효해질 때까지 버튼을 ** 비활성화 **하고 싶습니다. –
다른 계정으로 다른 사람에게도 대답했습니다. –
나는 리메이크를 참조한다. –
나는 여기에 내가 템플릿 내에서 다이빙을하지 않으 때문에 간단한 데모를 게시 할 수 있습니다.
논리가 간단합니다. 입력의 이벤트 인 "change"과 "keypress"을 "듣고"유효한지 확인해야합니다 (마지막 Chrome에서 코드를 테스트 한 결과, 다른 브라우저에서이 유효성 검사 API를 확인하거나 직접 만들거나 라이브러리를 사용해야합니다). 그렇다면 속성 disabled을 제거하고 추가하십시오.
모든 입력 필드는 비어 있지 않아도됩니다. –
당신은 내가 당신을 위해 모든 입력을 시뮬레이션한다고 기대하지 않습니다. 대답은 단지 방향입니다. –
가보십시오 벨로 HTML과 자바 스크립트 코드 :
<form id="my-form">
<input type="text" name="input1" class="required abc" />
<input type="text" name="input2" class=" abc" />
<input type="text" name="input3" class="required abc" />
<input type="text" name="input4" class=" abc" />
<input type="text" name="input5" class="abc" />
<button type="submit" name="finish" onsubmit="alert('SUBMITTED')">Finish</button>
</form>
자바 스크립트 코드 :
$(document).ready(function(){
$("form input").blur(function(){
var has_error = false;
$("form input.required").each(function(){
if($(this).val() == ''){
$(this).css('border','1px solid red');
has_error = true;
}
else{
$(this).css('border','');
}
});
if(has_error == false){
$("form button[name='finish']").prop('disabled', false);
}
else {
$("form button[name='finish']").prop('disabled',true);
}
});
});
체크 Fiddle 자세한 내용은
이유를 밝히지 않고 downvoting을 해주셔서 감사합니다. – doe
버튼을 비활성화하고 각 입력에 'onchange' 이벤트 또는 유사 항목이 있는지 확인한 다음 모든 입력이 비어 있지 않은지 확인한 다음 사용 중지 된 경우 제거하고 그렇지 않으면 추가 기능을 유지합니다 (별표 *로 추가). 제출 이벤트에서도 동일한 작업을 수행하려고합니다. –
나는 투표하지 않았지만 그 이유를 알 수 있습니다. 당신이 문제를 직접 풀려고 시도하지 않은 것부터 시작합니다. 있다면 코드를 포함 시키십시오. –