2

Why I need to click the button twice before it gets working? Function checks invalid input fields and passes sweetalert message when button is clicked.

document.addEventListener('invalid', (function() {
  return function(e) {
    e.preventDefault();
    $('#submit').on("click", function() {
      let valid = true;
      $('[required]').each(function() {
        if ($(this).is(':invalid') || !$(this).val()) valid = false;
      })
      if (!valid) swal({
        title: "Good job",
        text: "You clicked the button!",
        type: "success"
      }, );
    })
  };
})(), true);
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Alpinist
  • 21
  • 1
  • 8
    Because you're wrapping an event handler in a function in an event handler. – Rory McCrossan Oct 06 '22 at 07:57
  • What have you tried to resolve the problem? The code you've shared doesn't even contain any buttons – Nico Haase Oct 06 '22 at 07:58
  • Thanks for response. May I ask you, how should I fix it? – Alpinist Oct 06 '22 at 07:58
  • The button type="submit" is in a form. And what have I tried? Actually nothing yet. – Alpinist Oct 06 '22 at 07:59
  • 1
    @NicoHaase Assuming, the HTML code for the button is fine, the problem is the use of this function that has the issue. – node_modules Oct 06 '22 at 07:59
  • @node_modules assuming is a good start - sharing a runnable example is a better one ;) – Nico Haase Oct 06 '22 at 08:02
  • 2
    you only add the click handler when the form emits invalid state. browser emits invalid state when you submit it. that means after first click you bind the function. – cloned Oct 06 '22 at 08:32
  • @cloned So, submit should go first? – Alpinist Oct 06 '22 at 08:39
  • this depends on what you want to do. do you want to check for invalid when you submit? then yes. – cloned Oct 06 '22 at 08:53
  • You should only need one event handler - the *form* submit. Then check if the form is valid or not within that handler. But it's unclear what your comment (on the deleted answer) means: *using `invalid` to remove default browser popups when input fields are empty* - sounds like an XY Problem - what's the "default browser popup"? – freedomn-m Oct 06 '22 at 09:09
  • Default is like some input is required and the browser shows bubble below it "please fill all the fields" – Alpinist Oct 06 '22 at 09:22
  • Using answers from [this question](https://stackoverflow.com/questions/24391078/how-to-change-the-default-message-of-the-required-field-in-the-popover-of-form-c) you can *remove* the default browser popup using `oninvalid="this.setCustomValidity(' ')"` example: https://jsfiddle.net/78Lmcht4/ – freedomn-m Oct 06 '22 at 09:30
  • @freedomn-m Right, but it gives empty "bubble". – Alpinist Oct 06 '22 at 09:41
  • That's what I expected it would, but didn't for me in the fiddle, hence the suggestion. Might be browser specific. – freedomn-m Oct 06 '22 at 09:48
  • Great! I wrote those two event handlers as separate functions, one after another (submit first, invalid check second) and it seems working! – Alpinist Oct 06 '22 at 10:12

0 Answers0