1

I have a form which has four fields, when the all the fields are empty and submit button is clicked- it should alert "Please select at least one value".

When I enter the value in any of the fields the form should get submitted. I tried the following code but it's not working

function validatefleid() {
  var computername = document.myform.computername.value;
  var monitorname = document.myform.monitorname.value;
  var tvname = document.myform.tvname.value;
  var laptopname = document.myform.laptopname.value;
  var cellphonename = document.myform.cellphonename.value;
  if ((computername == null || computername == "") || (monitorname == null || monitorname == "") || (tvname == null || tvname == "") || (laptopname == null || laptopname == "") || (cellphonename == null || cellphonename == "")) {
    alert("Please atleast one value");
    return false;
  }

}
<form name="myform" onsubmit="return validatefleid()">
  computer
  <input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000">monitor
  <input type="text" class="form-control inpt-bx-txtclr-home" name="monitorname" id="monitorid" placeholder="000">tv
  <input type="text" class="form-control inpt-bx-txtclr-home" name="tvname" id="tvid" placeholder="000">laptop
  <input type="text" class="form-control inpt-bx-txtclr-home" name="laptopname" id="laptopid" placeholder="000">cellphone
  <input type="text" class="form-control inpt-bx-txtclr-home" name="cellphonename" id="cellphoneid" placeholder="000">

  <button type="submit">Calculate</button>
</form>

3
  • 2
    1. logical operator || is used, would have to be && to achieve "fail if all are empty, succeed if at least one is entered"; 2. the notation document.myform.controlname will not work cross-browser, consider replacing by document.getElementById('controlid') and use the controls' ids, not names, to refer to them in script. Commented Mar 7, 2016 at 13:05
  • just provided much more elegant & readable solution in my answer :-) Commented Mar 7, 2016 at 13:14
  • ya i have seen it is much easier thank you for help ronen Commented Mar 7, 2016 at 13:17

4 Answers 4

3

It is possible by iterating through all of the inputs within the form, and look for at least one input with value that's different than ''. Check the demo:

$(function(){
  var $form = $('#myform');
  $form.submit(function(){
    var valid = false;
    $('input', $form).each(function(){
      if($(this).val() != ''){
        valid = true;
      }
    });
    if (!valid) {
      alert("Please atleast one value");
    }
    return valid;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" name="myform">


computer<input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000">
monitor<input type="text" class="form-control inpt-bx-txtclr-home" name="monitorname" id="monitorid" placeholder="000">
tv<input type="text" class="form-control inpt-bx-txtclr-home" name="tvname" id="tvid" placeholder="000">
laptop<input type="text" class="form-control inpt-bx-txtclr-home" name="laptopname" id="laptopid" placeholder="000">
cellphone<input type="text" class="form-control inpt-bx-txtclr-home" name="cellphonename" id="cellphoneid" placeholder="000">

<button  type="submit" >Calculate</button>

</form>

Sign up to request clarification or add additional context in comments.

Comments

2

Without jQuery :

https://jsfiddle.net/uL28jsf9/

<script type="text/javascript">
function validatefleid()
{
    var allFieldsNames = ['computername', 'monitorname', 'tvname', 'laptopname', 'cellphonename'];

    var checkIfFieldEmpty function(fieldName) {
      var fieldValue = document.myform[fieldName].value;

      return fieldValue === "" || fieldValue === null
    }

  var allFieldsEmpty = allFieldsNames.every(checkIfFieldEmpty);

  if (allFieldsEmpty) {
    alert("Please atleast one value");
    return false;
  }
  else {
    alert("I'm ok with that !")
  }
}
</script>

Comments

1
oops i have got the answer 

I have a form which as four fields when the all the fields are empty and submit button is clicked it should alert as "please select atleast one value" when i entry the value in any of the one fields the form should get submitted i have tries the following code but its not working  



     <script type="text/javascript">
        function validatefleid()
        {
     var computername=document.myform.computername.value;
     var monitorname=document.myform.monitorname.value;
     var tvname=document.myform.tvname.value;
     var laptopname=document.myform.laptopname.value;
     var cellphonename=document.myform.cellphonename.value;
     if((computername==null || computername=="") && (monitorname==null || monitorname=="") && (tvname==null || tvname=="") && (laptopname==null || laptopname=="") && (cellphonename==null || cellphonename==""))
     {
        alert("Please atleast one value");
        return false;
     }

        }


    </script>

    <form name="myform" onsubmit="return validatefleid()">


    computer<input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000">
    monitor<input type="text" class="form-control inpt-bx-txtclr-home" name="monitorname" id="monitorid" placeholder="000">
    tv<input type="text" class="form-control inpt-bx-txtclr-home" name="tvname" id="tvid" placeholder="000">
    laptop<input type="text" class="form-control inpt-bx-txtclr-home" name="laptopname" id="laptopid" placeholder="000">
    cellphone<input type="text" class="form-control inpt-bx-txtclr-home" name="cellphonename" id="cellphoneid" placeholder="000">

    <button  type="submit" >Calculate</button>

    </form>

Comments

1

here is a complete cross-browser working version of validatefleid function.

function validatefleid(){
    var inputIds = ['computerid','monitorid','tvid','laptopid','cellphoneid'];
    var hasEnteredAnyValue = false;

    for(var i=0;i<inputIds.length;i++){
        hasEnteredAnyValue = document.getElementById(inputIds[i]).value;

        if(hasEnteredAnyValue)break;        
    }

     if(!hasEnteredAnyValue)
     {
        alert("Please atleast one value");
        return false;
     }
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.