If the entry conditions are insufficient on the membership registration page, we want to prevent submission after displaying a warning window, but it is not possible.

html
    head
        script(src="//code.jquery.com/jquery-3.3.1.min.js")
        title='Membership page'

        script.
            function submitAction(event) {
                var a = $('input[name=username]').val();
                if(a.length===0){
                    alert('Enter ID');
                    $('#frm').attr('onsubmit', 'event.preventDefault()');
                }
                return false;
            }


    body
        form(action='register', method='post', id='frm', onsubmit='submitAction();')

            input (type='text', name='username', placeholder='ID')

            p

            input (type='password', name='password', placeholder='password')

            p

            input (type='submit', value='membership')

The notification window appears, but it keeps submitting. What's the problem?

javascript pug

2022-09-22 08:26

3 Answers

To give you an answer, the method you used is to modify the onsubmit attribute belatedly after onsubmit has already popped in the form (and it does not return false in the event of an error).

What should I do? In fact, I would actively consider using the form validator plug-in that is available on the market, or attributes such as required="required" and minlength="8" that html5 supports.

// Basic form validation implementation. Haven't been tested
function submitAction(event) {

  // Specifies the validation discrimination variables.
  var valid = true;
  var errors = [];

  // Define the rule.
  // When will it become invalid, what error messages will you show then, etc
  var a = $('input[name=username]').val();
  if(a.length===0){
    valid = false;
    errors.push ("Enter your ID";
  }

  // If you didn't pass the rules,
  if (!valid) {

    // I'll leave a message
    $(errors).each(function(error){
      alert(error);
    });

    // Prevents default behavior (submit form).
    return false;

  // If you've passed the rule, just tell them to do the basic action.
  } } else {
    return true;
  }
}

2022-09-22 08:26

pug

html
    head
        script(src="//code.jquery.com/jquery-3.3.1.min.js")
        title='Membership page'

        script.
            function submitAction() {
                var a = $('input[name=username]').val();
                if(a.length==0){
                    alert('Enter ID');
                    $('#frm').attr('method', 'get');
                    $('#frm').attr('action', 'register_');      
                }
            }


    body
        form(action='register', method='post', id='frm', onsubmit='submitAction();')

            input (type='text', name='username', placeholder='ID')

            p

            input (type='password', name='password', placeholder='password')

            p

            input (type='submit', value='membership')

express

app.get('/register_', function(req, res){
    res.redirect('/register');
})

It's a solution I came up with while waiting for an answer.

2022-09-22 08:26

Mark up:

onsubmit='submitAction' <= parentheses must be subtracted.

Script:

function submitAction(event) {
    event.preventDefault();
    // // blah blah...
}

2022-09-22 08:26

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656