CODEWITHSUNDEEP
javascriptjqueryhtml
Pedro Bernardo
Pedro Bernardo

Reputation: 277

HTML5 required attribute trigger action with jQuery

I'm working on a prototype and I want to trigger an action after a submit but only if the required fields were filled.

I have this code

<button type="submit" onclick="doSomething()" class="btn btn-primary">Register</button>

And also an input on my form using the 'required' attribute from HTML 5, like this

<input type="text" class="form-control" placeholder="Name" required>

I want to trigger the action onclick only if the input was filled. I suppose I could do this by checking if the input was filled using jQuery, I was wondering if there is a simpler way

Upvotes: 0

Views: 1803

Answers (3)

Nenad Vracar
Nenad Vracar

Reputation: 122047

Well you can always use this https://jsfiddle.net/2Lzo9vfc/26/

HTML

<button type="submit"  class="btn btn-primary">Register</button>
<input type="text" class="form-control" placeholder="Name" required>

JS

$('button').click(function() {
  var content = $('input').val();

  if(content != '') {
    alert(content);
  }
});

Upvotes: 0

Pedro Bernardo
Pedro Bernardo

Reputation: 277

Well, I have actually found a solution, if anyone is going through the same problem, this is how I did it.

Instead of using "onclick" on the button tag I added an "onsubmit" (I had no clue this existed) event inside my form tag with my doSomething function, like this:

<form onsubmit="doSomething()">

The function will only be called if the required inputs are filled, easy as that.

Thanks for the ones who tried to help anyway

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try using oninput event 

function doSomething() {
  console.log("do stuff")
}

document.querySelector("input").oninput = function() {
  this.nextElementSibling.click()
}
<input type="text" class="form-control" placeholder="Name" required>
<button type="submit" onclick="doSomething()" class="btn btn-primary">Register</button>

Upvotes: 0

Related Questions