How to do this Javascript in jQuery?

Question

I have the following Javascript that checks if a field is empty.

function checkForm(form) {
    if(this.firstname.value == "") {
      alert("Please enter your First Name in the form");
      this.firstname.focus();
      return false;
    }
}

How would I rewrite this using jQuery?

@evolutionxbox yeah my thoughts exactly. Who is worse, the person with the poor question, or the person who answers. ¯\_(ツ)_/¯ — Tim B James, Apr 12 '17 at 08:56
Possible duplicate of [How do I check if an element is hidden in jQuery?](http://stackoverflow.com/questions/178325/how-do-i-check-if-an-element-is-hidden-in-jquery) — michaelmcgurk, Apr 12 '17 at 09:00

score 2 · Accepted Answer · answered Apr 12 '17 at 08:55

You can do this with Jquery validation.

$(".form").validate({
    rules: {
        firstname: {
            required: true
        },
      },
    errorElement: 'div',
    errorPlacement: function (error, element) {
        var placement = $(element).data('error');
        if (placement) {
            $(placement).append(error);
        }
        else {
            error.insertAfter(element);
        }
    }
});

Jquery validation: https://jqueryvalidation.org/documentation/

score 1 · Answer 2 · answered Apr 12 '17 at 08:54

1

something like

var $firstName = $(this).find( "[name='firstname']" );
if ( $firstName.val().length == 0 )
{
  alert("Please enter your First Name in the form");
  $firstName.focus();
  return false;
}

answered Apr 12 '17 at 08:54

gurvinder372

64,240
8
67
88

3

`this.firstname` could directly translate to `$('#firstname')` as we know it is an Id. – Tim B James Apr 12 '17 at 08:55

score 1 · Answer 3 · answered Apr 12 '17 at 09:01

It's pretty simple . Details commented in Snippet

SNIPPET

/* When any input has lost focus (ie blur)
|| and it's value is false, raise the alarm
*/
$('input').on('blur', function() {
  if (!$(this).val()) {
    alert('PUT SOMETHING IN THIS BOX');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input>

How to do this Javascript in jQuery?

3 Answers3