0

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

Improve this question
2
  • Is there a minimum length requirement for input element ? Commented Nov 7, 2015 at 20:39
  • Not really, it just needs to be filled Commented Nov 7, 2015 at 20:41

3 Answers 3

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

If solution at post resolves Question , can "accept" own Answer , see stackoverflow.com/help/self-answer
0

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>

Improve this answer

5 Comments

It doesn't work. The "doSomething" function is triggered even if the required input is not filled. I have actually just found a solution, I will be posting now
@PedroBernardo "It doesn't work. The "doSomething" function is triggered even if the required input is not filled." Why asked if there was required length for input element. If no required length , doSomething would be expected to be called even if input was space character " " . See comment at "Not really, it just needs to be filled"
But in your answer the doSomething function is triggered even with no space character.
@PedroBernardo "But in your answer the doSomething function is triggered even with no space character." ? Cannot reproduce at stacksnippets above. doSomething should not be called until at least a single character is input at input element
@PedroBernardo "I reproduce it at my own code" ? Can include "my own code" at Question ? , reproduce at stacksnippets , jsfiddle jsfiddle.net ? Where oninput event is triggered where no characters are input into input element ?
0

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);
  }
});
Improve this answer

1 Comment

Yes sir, that would definitely solve it, but as I said on my question "I suppose I could do this by checking if the input was filled using jQuery, I was wondering if there is a simpler way". And I have actually found I simpler way, as my answer shows it. Thanks anyway

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.