Restricting user to leave input field blank using javascript getElementsByClassName method

Question

Created a form. I just want to make form validation. Used javascript to do the job here. Inside jS code created a function named check. In that function if some user leaves the input field blank then the function returns false and in that way I think, can restrict user, but not happening. My question is addressing both getElement..() method and as well as form validation.

function check(){
  //fname is the value provided into the input field
    var fname = document.getElementsByClassName('fname').value;
    //checks the inpur field and it is blank then return false
    if (fname == '') {
    return false;
  }
  else {
  //if the input field is provided then will pass the validity
    return true;
  }
}

<div class="form">
<!-- created the class here and named form-->
  <form class="" action="output.html.php" method="post" onsubmit="return check()">
  <!-- called the check function-->
    <input class="fname" type="text" name="name" value="" placeholder="Name">
    <button type="submit" name="button">Send</button>
  </form>
</div>

@jordiburgos he does not mess with the focus, just checking if value is valid on blur, that's ok. — Eugene Tsakh, Oct 12 '18 at 17:21
You can also add a regex `pattern` to your inputs so that you can give the user a visual indication what fields are in error. — Andy, Oct 12 '18 at 17:25
Possible duplicate of [How do I cancel form submission in submit button onclick event?](https://stackoverflow.com/questions/4227043/how-do-i-cancel-form-submission-in-submit-button-onclick-event) — jordiburgos, Oct 12 '18 at 17:25
Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Heretic Monkey, Oct 12 '18 at 18:44

score 0 · Answer 1 · answered Oct 12 '18 at 17:20

0

The problem is that getElementsByClassName returns an array, so you should use either document.getElementsByClassName('fname')[0].value or document.querySelector('.fname').value (querySelector returns only first found entity)

answered Oct 12 '18 at 17:20

Eugene Tsakh

2,777
2
14
27

score 0 · Answer 2 · answered Oct 13 '18 at 02:44

Here is my complete code after execution.

function check(){
  //fname is the value provided into the input field
    var fname = document.getElementsByClassName('fname')[0].value;
  //var fname = document.querySelector('.fname').value;
    
    //checks the input field and if it is blank then return false
    if (fname == '') {
    return false;
  }
  else {
  //if the input field is provided then will pass the validity
    return true;
  }
}

<div class="form">
<!-- created the class here and named form-->
  <form class="" action="output.html.php" method="post" onsubmit="return check()">
  <!-- called the check function-->
    <input class="fname" type="text" name="name" value="" placeholder="Name">
    <button type="submit" name="button">Send</button>
  </form>
</div>

Restricting user to leave input field blank using javascript getElementsByClassName method

2 Answers2