How to check if the user has not entered the data to a form (befor sending)?

Question

I have some input form on names: owner, number, city

<input id="id_owner" type="text" name="owner" maxlength="250" />
<input id="id_number" type="text" name="number" maxlength="250" />
<input id="id_city" type="text" name="city" maxlength="250" />

How to check if the user has not entered the data to a form (befor sending) that does not show this dialog from this code:

<a type="submit" name"save-continue-to-review" data-toggle="modal" data-target="#dialog" href=""
class="btn primary btn-primary" title="Order">Order
</a>

and it will show another

Here is full code: http://wklej.org/id/927806/

Answer 1

Eventually you'll be able to use HTML5 form validation. But until then, use some jQuery code like this. (only because you tagged the question with jQuery. You could potentially do it with vanilla JS.)

(un-tested code, but should work)

var fields = $('input')

$('form').submit(function(e){
    e.preventDefault()
    valid = true
    fields.each(function(){
        if ($(this).val() == null) {
            valid = false
        }
    });

    if (valid == true) {
        $('form').submit()
    } else {
        alert("At least one field was not valid!")
    }
});

Answer 2

if ( !$(this).val() ) {
  valid = false
}

maybe this post is useful for you

Answer 3

1) Add this on your form

onsubmit="return validateForm(this);" 

2)The validate function (checks if fields are empty)

function validateform(formObj)
{
  inputs = formObj.GetElementsByTagName('input');

  for(i=0; i < inputs.length; i++)
  {
    if($.trim(inputs[i].value) == '')
    {
       alert('Field: ' + inputs[i].name + ' is empty!');
       return false;
    }
  }  
  return true;
}