js - prevent form submit

Question

I got a form submitted by a button type="submit",when i click it , it start the frontend validation but i also have some server validation that i have to do with ajax. For example that the name it's not used by another person.

My problem is that if i change to button type="button" the frontend validation don't execute. Only the ajax validation do it. What can i do? P/D: i use tiny.js that is similar to jquery for js events.

html

<form>
  <input name="name" class="name">
  <button type="submit" class="name__valid" value="save">save</button>
<form>

js

tiny.ajax("/update",
    {
        method: "PUT",
        data: {
            name: document.querySelector('name__valid').value;
        },
        dataType: "json",
        success: function (data) {
            alert('available name');
            window.location = "/home?name-update=success"
        },
        error: function (error) {
            //example: used name error
            var errorJSON = JSON.parse(error.response);

            console.log('Messages ' + errorJSON.messages);
        }
    }
);

//this validation only it's executed by de button (type submit)
var name = new ch.Validation(ch('.name__valid')[0], {
    'conditions': [{
        'name': 'invalid-name',
        'message': 'this name it's not valid'
    }]
});

event.preventDefault() maybe?

Dust_In_The_Wind
– Dust_In_The_Wind

2017-01-13 20:26:13 +00:00
Commented Jan 13, 2017 at 20:26 — Dust_In_The_Wind
– Dust_In_The_Wind, Commented Jan 13, 2017 at 20:26
with only event.preventDefault() don't work

Franco Manzur
– Franco Manzur

2017-01-16 12:14:56 +00:00
Commented Jan 16, 2017 at 12:14 — Franco Manzur
– Franco Manzur, Commented Jan 16, 2017 at 12:14

Fabian Schultz · Accepted Answer · 2017-01-13 20:35:16Z

6

You want to use event.preventDefault when the form is submitted.

document.querySelector('form').onsubmit = function(e) {
  e.preventDefault();
  // Do your Ajax request after.
}

On JSBin.

edited Jan 13, 2017 at 20:35

answered Jan 13, 2017 at 20:28

Fabian Schultz

18.6k6 gold badges54 silver badges58 bronze badges

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

Comments

user5964970 · Accepted Answer · 2017-01-13 20:31:37Z

1

I think the best way to prevent the automatic submission of the form is the following:

<form onsubmit="alert('Replace the alert with any validation code');return false;">
  <input name="name" class="name">
  <button type="submit" class="name__valid" value="save">save</button>
<form>

The event handler on the form itself handles when clicking the button AND when pressing the return key in the input field. Replace the alert function call with your Ajax validation but make sure you keep the return false;statement which prevents the automatic posting of the form.

answered Jan 13, 2017 at 20:31

user5964970

Collectives™ on Stack Overflow

js - prevent form submit

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related