Beginner Trying To Learn About Validating Fields Before Submit In Javascript

Can someone please help me? I am trying to get the fields validated before submit and if fields are empty I need error message to show up. I have tried jquery but i want to learn

Solution 1:

Easy way to try Html 5...without JS

use REQUIRED in input field

<input type="text" name="username" id="username" required>

Solution 2:

you should use the validation function with the help of code write as

<script>
function validation(){
var elment1=document.getElementById('el1').value;
....... 
........// same write code above
if(EmptyVaue(elment1)){
document.getElementById('el1').innerHTML="Enter the value first ";
}
}
function EmptyVaue(val){
if(val==""){
return true;
 }
else{
return false;
}
}
/* other validation can you write same for check number email etc by function */
</script>

<form action="youe_page_url.extn" onclick="return validation()">
<div>
 Enter value<input type="text" id="el1">
 <span id="error" style="color:red"></span>
 </div>
 <input type="submit" value="submit">


  </form> `

Solution 3:

I have tried jquery but i want to learn the javascript way.

Okay!

When you're working with form and you want to validate the form then form submit event should be better choice to use with input[type="submit"] button.

var frm = document.querySelector('form'),
  user = document.querySelector('#username'),
  pwd = document.querySelector('#pw'),
  err = document.querySelector('#error');

frm.addEventListener('submit', function(e) {
  err.textContent = '';
  if (user.value.trim() === '') {
    err.textContent = 'Please fill user name.';
    return false;
  }
  if (pwd.value.trim() === '') {
    err.textContent = 'Please use valid password.';
    return false;
  }
});

<form action='#' method='post'>
  <p>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
  </p>
  <p>
    <label for="pw">Password:</label>
    <input type="password" name="pw" id="pw">
  </p>
  <p>
    <input type="submit" value="Submit">
  </p>

  <!-- placeholder for response if form data is correct/incorrect -->
  <p id="error"></p>
</form>