如果用户只输入任何行中的第一个输入，则显示下一个自定义错

Question

我正在进行表单验证，如果用户没有连续填写所有字段，我的要求是show erro message。在我的页面中，每行有两行包含两个输入字段。当我在所有字段都为空时单击提交按钮时，它应该显示错误。页面前两个输入工作。当用户输入第一个字段时，下一个字段也是必填项不需要第二行，如果用户填充第一行并且还提交第二行第一个字段，则第二行第二个字段为必填项。     以这种方式是我的要求我写了一些代码。     提前谢谢。

HTML

function crtNewRelease() {
  var versionIpa = document.getElementById("versionIpa");
  var version1Error = document.getElementById("version1Error");
  var selectDevice1 = document.getElementById("selectDevice1");
  var selectDevice1Error = document.getElementById("selectDevice1Error");
  var versionApk = document.getElementById("versionApk");
  var version2Error = document.getElementById("version2Error");
  var selectDevice2 = document.getElementById("selectDevice2");
  var selectDevice2Error = document.getElementById("selectDevice2Error");
  if (sltProject.value == "") {
    sltProject.style.border = "solid 1px red";
    firstNError.textContent = "Select Project";
    firstNError.style.color = "red";
    firstNError.style.marginTop = "10px"
    sltProject.focus();
    return false;
  }
  if (releaseName.value == "") {
    releaseName.style.border = "solid 1px red";
    lastNError.textContent = "Enter Release Name";
    lastNError.style.color = "red";
    lastNError.style.marginTop = "10px"
    releaseName.focus();
    return false;
  }
  var sameCls = document.getElementsByClassName("newformInputs");
  var inputArray = [];
  var result;
  var i = 1
  for (i = 1; i < sameCls.length; i++) {
    result += sameCls[i]
    if (result == 1) {
      version1Error.textContent = "Enter version";
      return false;
    } else {
      version1Error.style.display = "none";
    }
  }
}

<form name="createNewRelease" onsubmit="return crtNewRelease();">
  <select class="form-control" id="sltProject">
        <option value="">Select Project</option>
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">Domino’s Makeline App</option>
      </select>
  <div id="firstNError" class="firstN"></div>
  <input class="form-control " placeholder="Release Name" type="text" id="releaseName">
  <div id="lastNError" class="firstN"></div>
  <div class="selectPlatform">
    <h6>Select platforms (you can select both)</h6>
    <div class="row">
      <div class="col-md-5">
        <input class="form-control newformInputs" placeholder="Version number" type="text" id="versionIpa" />
        <div id="version1Error" class="firstN"></div>
      </div>
      <div class="col-md-5 ">
        <select class="form-control newformInputs" id="selectDevice1">
              <option value="">Select device</option>
              <option>iPhone</option>
              <option>iPad</option>
            </select>
        <div id="selectDevice1Error" class="selectDevice1Cls"></div>
      </div>
      <div class="col-md-1"> <span> </span></div>
    </div>
    <div class="row">
      <div class="col-md-5 ">
        <input class="form-control newformInputs" placeholder="Version number" type="text" id="versionApk">
        <div id="version2Error" class="firstN"></div>
      </div>
      <div class="col-md-5 ">
        <select class="form-control newformInputs" id="selectDevice2">
              <option value="">Select device</option>
              <option>iPhone</option>
              <option>iPad</option>
            </select>
        <div id="selectDevice2Error" class="selectDevice2Cls"></div>
      </div>
      <div class="col-md-1"> <span></span></div>
    </div>
  </div>
  <div class="btnsRow">
    <button class="btn" type="submit">Create Release</button>
    <a href="javascript:void(0)" class="btn btn-primary">Cancel</a>
  </div>
</form>

Answer 1

好的，我将它添加到此代码中。检查它！。

<form name="createNewRelease" onsubmit="return crtNewRelease();">
  <select class="form-control" id="sltProject">
        <option value="">Select Project</option>
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">Domino’s Makeline App</option>
      </select>
  <div id="firstNError" class="firstN"></div>
  <input class="form-control " placeholder="Release Name" type="text" id="releaseName">
  <div id="lastNError" class="firstN"></div>
  <div class="selectPlatform">
    <h6>Select platforms (you can select both)</h6>
    <div class="row">
      <div class="col-md-5">
        <input class="form-control newformInputs" placeholder="Version number" type="text" id="versionIpa" />
        <div class="error"></div>
      </div>
      <div class="col-md-5 ">
        <select class="form-control newformInputs" id="selectDevice1">
              <option value="">Select device</option>
              <option>iPhone</option>
              <option>iPad</option>
            </select>
        <div class="error"></div>
      </div>
      <div class="col-md-1"> <span> </span></div>
    </div>
    <div class="row">
      <div class="col-md-5 ">
        <input class="form-control newformInputs" placeholder="Version number" type="text" id="versionApk">
        <div class="error"></div>
      </div>
      <div class="col-md-5 ">
        <select class="form-control newformInputs" id="selectDevice2">
              <option value="">Select device</option>
              <option>iPhone</option>
              <option>iPad</option>
            </select>
        <div class="error"></div>
      </div>
      <div class="col-md-1"> <span></span></div>
    </div>
  </div>
  <div class="btnsRow">
    <button class="btn" type="submit">Create Release</button>
    <a href="javascript:void(0)" class="btn btn-primary">Cancel</a>
  </div>
</form>

JS：

function crtNewRelease() {
  var versionIpa = document.getElementById("versionIpa");
  var version1Error = document.getElementById("version1Error");
  var selectDevice1 = document.getElementById("selectDevice1");
  var selectDevice1Error = document.getElementById("selectDevice1Error");
  var versionApk = document.getElementById("versionApk");
  var version2Error = document.getElementById("version2Error");
  var selectDevice2 = document.getElementById("selectDevice2");
  var selectDevice2Error = document.getElementById("selectDevice2Error");
  if (sltProject.value == "") {
    sltProject.style.border = "solid 1px red";
    firstNError.textContent = "Select Project";
    firstNError.style.color = "red";
    firstNError.style.marginTop = "10px"
    sltProject.focus();
    return false;
  }
  if (releaseName.value == "") {
    releaseName.style.border = "solid 1px red";
    lastNError.textContent = "Enter Release Name";
    lastNError.style.color = "red";
    lastNError.style.marginTop = "10px"
    releaseName.focus();
    return false;
  }
  var sameCls = document.getElementsByClassName("newformInputs");
  var inputArray = [];
  var errorPos = [];
  var result;
  var i = 0;
  for (i = 0; i < sameCls.length; i++) {
    result = sameCls[i];
    if (result.value == "" ) {
            errorPos.push(i);
    } else {
      //version1Error.style.display = "none";
    }
  }
  //reset error class
  var listerror = document.getElementsByClassName("error");
  for(var t5 = 0 ; t5 < listerror.length ; t5++ ){
    listerror[t5].textContent = "";
  }
  console.log(errorPos);
  var flag = false;
  if(errorPos.length > 0){
    for (i = 0; i < sameCls.length; i=i+2 ) {

        if(i % 2 == 0){
        console.log(errorPos.indexOf(i));
            if(errorPos.indexOf(i)==-1){
            if(errorPos.indexOf(i+1)==-1){
                flag = true;
            }
            else{
                flag = false;
            }

          }

        }       
    }
    if(!flag){
        for(var t2= 0 ; t2 < errorPos.length ; t2++){
      console.log(sameCls[errorPos[t2]]);
        for(var t3 = 0 ; t3 < sameCls[errorPos[t2]].parentNode.childNodes.length; t3++ ){
           if(sameCls[errorPos[t2]].parentNode.childNodes[t3].className == "error"){
              sameCls[errorPos[t2]].parentNode.childNodes[t3].textContent = "Erorr!!";
              sameCls[errorPos[t2]].parentNode.childNodes[t3].style.display = "block";
              return false;
            }
        }
      }

    }
   }
   return false;
}

Check It!