how to set required when the value is not empty

Question

I want to create a validation form which is where the border input is red then set required or cant submit.iam using jquery ajax.

i am using ajax call to do some validation on the server side and after receiving the response i want to decide if i want to submit the form or not.

i want call some validation using jquery on 'keyup' and then if the input got validation error set input required so the users cant submit

<input type="text" class="form-control" placeholder="Username" name="username" id="username" required/>

here is my code ajax:

<script type="text/javascript">
      $(document).ready(function(){
$('#username').on('keyup',function(){
  var selectData = $(this).val();
  var url ="Author/Fvalidation";
  $.ajax({
    type:"POST",
    url:"<?php echo base_url() ?>"+url,
    data:{'selectData':selectData},
    success:function(data){
      if (data === 'error') {
        $('#username').css("border","2px solid red");
        $('#username').removeAttr('value');
        $('#username').attr("required","true");
      }else {
          $('#username').css("border","2px solid green");

        }
    }
  });

});
      });
    </script>

`$('#username').removeAttr('value');` perhaps `$('#username').val('');` — Mark Schultheiss, May 10 '18 at 16:59
what are you trying to achieve ? are you using ajax call to do some validation on the server side and after receiving the response you want to decide if you want to submit the form or not? — Muhammad Omer Aslam, May 10 '18 at 17:08

Mark Schultheiss · Answer 1 · 2018-05-10T18:27:54.837

There are differences between Property and Attribute in HTML. I won't go into that but reference this: https://stackoverflow.com/a/6004028/125981

You (probably) only want to hit the server when things change, so let's use that event. It is always better to use classes and CSS so we do that.

Since you are inside an event handler, we can get that element with $(this) and then work with that, hitting the DOM only once.

You can also chain jQuery so we do that.

Now as to you PHP stuff, I have no idea, but as long as it returns the proper "error" string then it should work.

$(function() {
  $('#username').on('change', function() {
    // cache the item
    var myInput = $(this);
    var selectData = myInput.val();
    var url = "<?php echo base_url() ?>" + "Author/Fvalidation";
    $.ajax({
      type: "POST",
      url: url,
      data: {
        'selectData': selectData
      }
    }).done(function(data) {
      if (data === 'error') {
        myInput.addClass("isInValid")
          .removeClass("isValid")
          .val('');
        //.attr("required", "true"); // this already is on the element
      } else {
        myInput.addClass("isValid")
          .removeClass("isInValid");
      }
    });
  }).addClass("isInValid"); // to start with
  // prevent form submit 
  //https://stackoverflow.com/q/9347282/125981
  $('#myfunform').on('submit', function(event) {
    if (!!$(this).find('input').filter('.isInValid').length) {
      event.preventDefault();;
    }
  });
});

.isInValid {
  border: 2px solid red;
}

.isValid {
  border: 2px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="form-control" placeholder="Username" name="username" id="username" required/>

Muhammad Omer Aslam · Accepted Answer · 2018-05-10T20:00:31.223

You should assign the required attribute by default to the input so that if you click right away on submit after page load and the input is empty it would prompt you for the input with the message, rather than controlling it on the jquery /javascript side.

Then create a separate css class for the error field say .has-error and apply it on the field when the error occurs.

.has-error{
    color:red;
    border:2px solid red;
}

You can use $.addClass() and $.removeClass() respectively and bind the form submit to check if the input has the has-error class using $.hasClass() and prevent the submit using e.preventDefault() or return true otherwise to submit the form.

You should use .on('input') event so that the event doesn't fire everytime the cursor moves, input event ensures something has changed, omitting cursor moves, or empty input.

$(document).ready(function() {
  $('#username').on('input', function() {
    var username = $('#username');
    var selectData = $(this).val();
    var url = "<?php echo base_url() ?>" + "Author/Fvalidation";

    $.ajax({
      type: "POST",
      url: url,
      data: {
        'selectData': selectData
      },
      success: function(data) {
        if (data === 'error') {
          username.addClass("has-error").val('');
        } else {
          username.removeClass("has-error");
        }
      },
      error: function(xhr, error, code) {
        username.addClass("has-error").val('');
      }
    });

  });
  $("form").on('submit', function(e) {
    if (!$("#username").hasClass('has-error')) {
      return true;
    }
    e.preventDefault;
  })
});

.has-error {
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="my-form" action="maps.html">
  <input type="text" name="username" id="username" required />
  <input type="submit" value="submit" />
</form>

that is your choice if you still want to use on `keyup` you can change `input` to `keyup` in the line `$('#username').on('input', function() {` @FarisDewantoro — Muhammad Omer Aslam, May 11 '18 at 01:59

how to set required when the value is not empty

2 Answers2