jQuery of required field validation not working

Question

I have created this very simple code just for my practice. I am trying to test the jQuery for the required fields. But it is not working. Can someone tell me why? Also, it would be really helpful if you can also tell how can I improve it. I was thinking to make it even better by displaying error message below the field instead of the alert box and also to change the text field colour to red if an error occurred.

$(document).ready(function() {
  $('.btn').click(function() {
    if ($('#fn').val() == "" || $('#ln').val() == "") {
      alert('Please complete the required field(s)');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="background-color : black">
  <br /><br /><br />
  <div style="text-align:center; color:white;">
    <form>
      <strong> 
      First Name &nbsp &nbsp &nbsp &nbsp <input id = "fn" type = "text" /> <br /><br />
      Middle Name &nbsp &nbsp &nbsp &nbsp <input id = "ln" type = "text" /> <br /><br />
      Last Name &nbsp &nbsp &nbsp &nbsp <input type = "text" /> <br /><br />
      Gender &nbsp &nbsp &nbsp &nbsp <select> 
          <option value = "Male">Male</option>
          <option value = "Female">Female</option>
           </select> <br /><br />
      Married &nbsp &nbsp &nbsp &nbsp <select> 
          <option value = "No">No</option>
          <option value = "Yes">Yes</option>
                 </select> <br /><br />
      Spouse Name &nbsp &nbsp &nbsp &nbsp <input type = "text" /> <br /><br />
      DOB &nbsp &nbsp &nbsp &nbsp <input type = "date" /> <br /><br />
      Email &nbsp &nbsp &nbsp &nbsp <input type = "text" /> <br /><br />
      Age &nbsp &nbsp &nbsp &nbsp <input type = "text" /> <br /><br />
      Mobile &nbsp &nbsp &nbsp &nbsp <input type = "text" /> <br /><br /><br />
      <button class="btn"> SUBMIT </button>
      </strong>
    </form>
  </div>

you can use jquery validation or form validation plugin instead — Bhumi Shah, Jun 02 '18 at 05:49
1. Use the submit event 2. Use preventDefault to not submit: `$(function() { $('form').on("submit",function(e) { if ($('#fn').val() == "" || $('#ln').val() == "") { e.preventDefault(); alert('Please complete the required field(s)'); } }); });` — mplungjan, Jun 02 '18 at 06:00
To not have to do anything, add the `required` attribute to each field tag — mplungjan, Jun 02 '18 at 06:01

score 0 · Answer 1 · answered Jun 02 '18 at 06:16

$(document).ready(function() {
  $('.btn').click(function() {
    debugger;
    var isValidForm = validateFields();
    if (isValidForm) {

      //code to submit form
    }
  });
});

function validateFields() {

  var isValid = true;
  $('.validate').each(function(index, object) {
    if (!$(object).val()) {
      isValid = false;
      $(object).siblings('.error-msg').show();
    }
  });
  return isValid;
}

* {
  color: black
}

.error-msg {
  color: red;
  display: none;
}

<div style="text-align:center; ">

  First Name
  <input id="fn" type="text" class="validate" />
  <p class="error-msg">Required</p>
  <br /><br /> Gender
  <select class="validate">
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </select>
  <p class="error-msg">Required</p><br /><br />

  <button class="btn"> SUBMIT </button>

</div>

jQuery of required field validation not working

1 Answers1