By "submited" I mean the modal form content is saved without errors, even with empty text.
Chris Stanyon
Hey Eduardo,
Firstly, you seem to have 2 bindings for the click on your button. One is inline:
onclick="Xxxxx.vitrine.salvar();
And one is attached through jQuery:
$('#btnSubmit').click(function() {
Unless you have very specific reasons for doing it (and you know what you're doing), pick one and remove the other (personally, I'd go with the jQuery approach to keep Javascript out of your HTML)
The one atached through jQuery looks wrong for a couple of reasons, and if you check your console, you'll likely see errors (so it's very likely that it's not even being bound to your button). Firstly, you have 2 else statements:
if (!data.result.erro) { ...} else { ...} else { // you bind the click event in here, but it's ever going to be called.}
Secondly, you've got 2 document ready fuctions - one inside the other. The first one is the normal way of writing it:
$(document).ready(function() {
and the second is the shorthand way of writing it:
$(function() {
They both do exectly the same thing, so the second one is redundant as you're already in the dom ready event handler. You don't need the second one!
Now, to stop a event handler dead in it's tracks (i.e. your validation fails) you have a couple of options. For your inline function, your need to return false from your function and then return the result of the function from your handler:
onclick="return Xxxxx.vitrine.salvar();">
function Xxxxx.vitrine.salvar() { ... // to stop the click event from firing: return false;}
To stop a jQuery bound event, the easiest way is to pass the event object into the handler and call preventDefault() on it:
$('#btnSubmit').click(function(e) { <-- NOTICE HOW WE PASS IN THE EVENT OBJECT var txt = $('#title'); if (txt.val() != null && txt.val() != '') { alert('you entered text ' + txt.val()) } else { //prevent the handler from continuing e.preventDefault(); alert('Please enter text') } })
I'm not talking about 2 different buttons. I'm talking about 1 button that has 2 bindings (2 different click handlers on the same button). You have this in your code:
was added by me at the original script attempting to avoid save empty data at textbox...
Chris Stanyon
The fact that you have 2 event handlers is part of your problem
In your jQuery event handler, you are returing false in the hope that it will stop the form being submitted - it won't do that because while you may have stopped the jQuery click handler, your other handler Xxxxx.vitrine.salvar() will still fire.
You have a problem with priority. Basically your Xxxxx.vitrine.salvar() will run first, and then the jQuery click() function will run. Now if you add validation to the jQuery code, then your other function has already finished before you've even started your validation.
Like I said, technically you can have 2 handlers if you really want - just make sure you know exactly what you're doing and what order the events are firing in, otherwise you will have problems. I wouldn't recommend it.
lenamtl
Hi,
Don't forget to have the server side validation as Javascript validation can be bypassed easily.
What I usually do is to remove space if any before and after any content, so if user just click on space bar and enter nothing it will catch it as empty...
Otherwise it may be considered as filled but it is not...
That doesn't actually stop the form from being submitted as per your question. The form is still submitted to the server where you then carry out the validation. You'll still need to handle the Modal in your Javascript - PHP has no concept of your Modal.
The real issue was avoid to persist empty data at DB table columns, The frontend approach you presented would be perfectly valid to do that if we continue to implemting it .
Just the backend solution looks easier to get the same effect.
By "submited" I mean the modal form content is saved without errors, even with empty text.