텍스트 상자와 드롭 다운을 사용하여 HTML 코드 내에서 유효성을 검사하려고합니다.

현재 해결하려고하는 코드는 필수 드롭 다운 상자가 하나 있습니다. 해당 드롭 다운 상자에서 "완료"를 선택하면 텍스트 상자가 나타납니다. 해당 드롭 다운 상자에서 "포기"를 선택하면 다른 옵션과 함께 두 번째 드롭 다운 상자가 나타납니다.텍스트 상자와 드롭 다운을 사용하여 HTML 코드 내에서 유효성을 검사하려고합니다.

첫 번째 드롭 다운을 선택한 후에 두 번째 옵션에 유효성 검사를 추가하려고합니다. 내 코드에는 필수 필드로 표시된 첫 번째 드롭 다운 상자 "ActionDD"가 있습니다. 하지만 "REMtextBox"또는 "ReasonDD"드롭 다운 상자는 동시에 나타나지 않으므로 텍스트 상자로 할 수 없습니다. 여기

내가 제출 버튼을 누를 때 조건을 확인하기 위해 내 자바 스크립트를 작업 한 코드 내 양식 여기에

<form name=StudentForm action="javascript:window.close();"> 
<div class="DDbox"> 
<select name="Action" id="ActionDD" required onchange="showHide()"> 
    <option value="">Action:</option> 
    <option value="complete">Complete</option> 
    <option value="abandon">Abandon</option> 
    <option value="transfer">Transfer</option> 
</select> 
</div> 
<br> 
<div class="COMPLETEbox" id="COMPLETEbox" > 
    <input class="hidden-items" type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" min="1" maxlength="10" style="display:none;"/><br> 

<select class="hidden-items" name="Reason" id="ReasonDD" style="display:none;"> 
    <option value="">Reason:</option> 
    <option value="NoShow">No Show</option> 
    <option value="Unfixable">Unfixable</option> 
    <option value="other">Other</option> 
</select><br><br> 
    <br> 
    <input type="submit" value="submit" onclick="checkform();"> 
</div> 
</form>

에 대한 코드입니다.

function checkform() { 
    if (document.getElementById('ActionDD').value ="abandon" && (document.getElementById('ReasonDD').value ="")) 
     { 
      validationMessage = validationMessage + 'Enter Reason'; 
      valid = false; 
     } 
     else valid = true; 
} 
</script>

내가 첫 번째 드롭 아래로 값이 선택된 경우 다음 어떤 해당 텍스트 상자를 확인하거나 첫 번째 드롭 다운에서 만들어진 선택에서 나타나는 드롭 다운하는 방법에 대한 해결책을 찾고 선택 값을 갖는다 .

미리 도움을 청하십시오.

출처

2016-09-15 tbrock29

아래 코드를 사용해보십시오. 아이디어는 ActionDD 드롭 다운의 onchange 중에 'required'속성을 설정/제거하는 것입니다. 희망이 도움이됩니다.

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>HTML code with text-boxes and drop-downs</title> 

    <script type="text/javascript"> 

     var actionBox, 
      reasonBox, 
      completeBox, 
      remTextBox, 
      selectedAction, 
      isFormValid, 
      validationMessage = "Not all required fields are filled in; "; 

     function init() { 
      actionBox = document.getElementById('ActionDD'); 
      reasonBox = document.getElementById('ReasonDD'); 
      completeBox = document.getElementById('COMPLETEbox'); 
      remTextBox = document.getElementById('REMtextBox'); 
      selectedAction = actionBox.value; 

      remTextBox.style.display = 'none'; 
      remTextBox.removeAttribute("required"); 

      reasonBox.style.display = 'none'; 
      reasonBox.removeAttribute("required"); 

      isFormValid = false; 
     } 

     function checkform() { 
      // Include other logic if needed here... 
     } 

     function showHide() { 
      init(); 

      if (selectedAction == 'complete') { 
       remTextBox.style.display = 'block'; 
       remTextBox.setAttribute("required", "required"); 
      } 
      else if (selectedAction == 'abandon') { 
       reasonBox.style.display = 'block'; 
       reasonBox.setAttribute("required", "required"); 
      } 
     } 
    </script> 

    <style> 
    </style> 
</head> 
<body> 
    <form name="StudentForm"> 
     <div class="DDbox"> 
      <select name="Action" id="ActionDD" required onchange="showHide()"> 
       <option value="">Action:</option> 
       <option value="complete">Complete</option> 
       <option value="abandon">Abandon</option> 
       <option value="transfer">Transfer</option> 
      </select> 
     </div> 
     <br> 
     <div class="COMPLETEbox" id="COMPLETEbox"> 
      <input class="hidden-items" type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" min="1" maxlength="10" style="display:none;" /><br> 

      <select class="hidden-items" name="Reason" id="ReasonDD" style="display:none;"> 
       <option value="">Reason:</option> 
       <option value="NoShow">No Show</option> 
       <option value="Unfixable">Unfixable</option> 
       <option value="other">Other</option> 
      </select> 
      <br> 
      <br> 
      <br> 
      <input type="submit" value="submit" onclick="checkform();"> 
     </div> 
    </form> 
</body> 
</html>

출처

2016-09-15 09:30:55

JavaScript 유효성 검사 기능 에 약간의 실수가 있었지만 (x == y) 할당 (x = y)을 수행 한 것보다 약간 실수가 있습니다.

그 외에도 aselectbox에서 선택한 값을 가져 오는 방법이 약간 다릅니다.

function checkform() { 
    var action = document.getElementById('ActionDD'), 
      reason = document.getElementById('ReasonDD'); 

    if (action.options[action.selectedIndex].value =="abandon" && reason.options[reason.selectedIndex].value =="") 
    { 
     validationMessage = validationMessage + 'Enter Reason'; 
     valid = false; 
    } 
    else valid = true; 
}

이 조금 도움이되기를 바랍니다 :

이 조금 변화와 코드입니다.

출처

2016-09-15 05:42:46 codelock

시도해보십시오. 버튼에서

function checkform() { 
    if (document.getElementById('ActionDD').value =="abandon" && (document.getElementById('ReasonDD').value =="")) 
     { 
      //Your validation message     
      return false; 
     } 
     else return true; 
} 
</script>

onchange를()

function showHide() { 
if(document.getElementById('ActionDD').value =="abandon") 
{ 
document.getElementById("ReasonDD").style.display= 'block'; 
document.getElementById("ReasonDD").required = true; 
} 
else 
document.getElementById("ReasonDD").style.display= 'none'; 

}

변경하여 HTML 작은 bit.Remove의 checkform()과는 다음과 같이 형성하기 위해 추가 할 수 있습니다.

<form name=StudentForm onsubmit="return checkform()" action="javascript:window.close();">

출처

2016-09-15 07:51:28 ADarnal

텍스트 상자와 드롭 다운을 사용하여 HTML 코드 내에서 유효성을 검사하려고합니다.

답변

관련 문제