JS 양식 체크 빈

Question

안녕하세요 입력 값이 비어있는 경우 양식을 확인하고자하지만,이 작업을 수행하는 가장 좋은 방법은 뭐죠 난 확실하지 않다, 그래서 나는이 시도 :

function checkform() 
     { 
     if (document.getElementById("promotioncode").value == "") 
     { 
      // something is wrong 
      alert('There is a problem with the first field'); 
      return false; 
     } 

     return true; 
     } 

HTML :

를

<form id="orderForm" onSubmit="return checkform()"> 
    <input name="promotioncode" id="promotioncode" type="text" /> 
    <input name="price" id="price" type="text" value="&euro; 15,00" readonly="readonly"/> 
<input class="submit" type="submit" value="Submit"/> 
     </form> 

더 좋은 해결책이 있습니까? 어떤 도움을 위해서 thx :

Answer 1

<input name="promotioncode" id="promotioncode" type="text" required /> 

최신 브라우저를위한 좋은 방법입니다. 그러나 대부분의 경우 이전 버전의 브라우저도 지원해야합니다. 이 자바 스크립트는 다음을 준수합니다 :

• required 입력 내용 (제출되는 양식 내)을 모두 기입하십시오.
• 브라우저가 required 특성을 아직 지원하지 않는 경우에만 alert 동작을 제공하십시오.

자바 스크립트 :

function checkform(form) { 
    // get all the inputs within the submitted form 
    var inputs = form.getElementsByTagName('input'); 
    for (var i = 0; i < inputs.length; i++) { 
     // only validate the inputs that have the required attribute 
     if(inputs[i].hasAttribute("required")){ 
      if(inputs[i].value == ""){ 
       // found an empty field that is required 
       alert("Please fill all required fields"); 
       return false; 
      } 
     } 
    } 
    return true; 
} 

것은 필요가 제출되지 않는 inputs을 확인하지하기 위해 checkform 기능에 this를 추가해야합니다.

<form id="orderForm" onsubmit="return checkform(this)"> 
    <input name="promotioncode" id="promotioncode" type="text" required /> 
    <input name="price" id="price" type="text" value="&euro; 15,00" readonly="readonly"/> 
    <input class="submit" type="submit" value="Submit"/> 
</form> 

Answer 2

지원할 브라우저에 따라 HTML5 필수 속성을 사용할 수 있으며 JS를 앞설 수 있습니다. required 속성을 추가

는

Fiddle.

Answer 3

데모 : http://jsfiddle.net/techsin/tnJ7H/4/#

var form = document.getElementById('orderForm'), 
    inputs=[], ids= ['price','promotioncode']; 


//findInputs 
fi(form); 
//main logic is here 
form.onsubmit = function(e){ 
    var c=true; 
    inputs.forEach(function(e){ if(!e.value) {c=false; return c;} }); 
    if(!c) e.preventDefault(); 
}; 


//findInputs function 
function fi(x){ 
var f = x.children,l=f.length; 
while (l) { 
    ids.forEach(function(i){if(f[l-1].id == i) inputs.push(f[l-1]); }); 
    l--; 
} 
} 

설명 :

• 당신에서는 event.preventDefault를 사용하는 과정을 제출 중지합니다. Event는 onsubmit 이벤트 함수로 전달되는 매개 변수입니다. html 또는 addeventlistner 형식 일 수 있습니다.
• 제출을 시작하려면 기본적으로 실행되지 않도록해야합니다.
• false를 다시 돌려서 각 루프를 중단 할 수 있습니다. 휴식을 사용하지 않습니다.
• 이 포럼이 비어 있는지 확인하는 요소의 이름을 넣을 수있는 id 배열을 넣었습니다.
• find input 메소드는 단순히 폼 요소의 자식 요소를 넘기고 id가 id 배열에 있는지 확인합니다. 그 경우 요소가 입력 요소에 추가됩니다. 입력 요소는 제출 전에 값이 있는지 나중에 확인됩니다. 그리고 그렇지 않은 경우 전화가 불이행을 방지합니다.