javascript - HTML5 form validation without submit button - Stack Overflow

admin管理员组

文章数量:1406008

i want to validate the form inputs without an type="submit" button. How can i do this?

I tried this ->

<script type="text/javascript">function validateForm() {
    $('#form1')[0].checkValidity()
   if( document.form1.vorname.value == "" )
   {
         return false;
   }
   if( document.form1.nachname.value == "" )
   {
         return false;
   }
   if( document.form1.postleitzahl.value == "" )
   {
         return false;
   }
   if( document.form1.email.value == "" )
   {
         return false;
   }
   if( document.form1.telefon_optin_Ja.value == "" )
   {
         return false;
    }
if( document.form1.ort.value == "" )
   {
         return false;
   }
   if( document.form1.straße.value == "" )
   {
         return false;
   }
   if( document.form1.Anrede.value == "" )
   {
         return false;


        }else { 
            $('#modal_absenden').modal({
              backdrop: 'static',
              keyboard: 'false',
                 })

    }
}
</script>

My form name is: form1 , button -> `Absenden

The "background" of the question is: I want to validate the form inputs first, then (if all inputs ok) it should opens a modal, where u can select the redirect page (redirect yes, redirect no) then it submit the form via post to mail.php.

I hope u understand my question, if u have questions, pls ask. (My english is not so good..)

Thank you for help.

i want to validate the form inputs without an type="submit" button. How can i do this?

I tried this ->

<script type="text/javascript">function validateForm() {
    $('#form1')[0].checkValidity()
   if( document.form1.vorname.value == "" )
   {
         return false;
   }
   if( document.form1.nachname.value == "" )
   {
         return false;
   }
   if( document.form1.postleitzahl.value == "" )
   {
         return false;
   }
   if( document.form1.email.value == "" )
   {
         return false;
   }
   if( document.form1.telefon_optin_Ja.value == "" )
   {
         return false;
    }
if( document.form1.ort.value == "" )
   {
         return false;
   }
   if( document.form1.straße.value == "" )
   {
         return false;
   }
   if( document.form1.Anrede.value == "" )
   {
         return false;


        }else { 
            $('#modal_absenden').modal({
              backdrop: 'static',
              keyboard: 'false',
                 })

    }
}
</script>

My form name is: form1 , button -> `Absenden

The "background" of the question is: I want to validate the form inputs first, then (if all inputs ok) it should opens a modal, where u can select the redirect page (redirect yes, redirect no) then it submit the form via post to mail.php.

I hope u understand my question, if u have questions, pls ask. (My english is not so good..)

Thank you for help.

• javascript
• jquery
• html
• forms
• twitter-bootstrap

Share Improve this question Follow asked Sep 12, 2014 at 9:43 user3442940user3442940 3111 gold badge11 silver badge55 bronze badges 2

• 1 Use on( "keyup", handler ). api.jquery./keyup. – loveNoHate Commented Sep 12, 2014 at 9:45
• Take a look at livevalidation. or this: jsfiddle/trixta/XqPhQ – davidcondrey Commented Sep 12, 2014 at 9:49

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

You have said about HTML5.

Then that means all you have to do is to use checkValidity() along with

 <input type="text" name="name" required>
<input type="email" name="email" required placeholder="Enter a valid email address">

Here is the nice article about using HTML5 validation.

I have not used by myself. But I am glad to know a bit from your post.

http://www.the-art-of-web./html/html5-form-validation/

If you want to use jQuery one then go for validation. http://www.codeproject./Articles/213138/An-Example-to-Use-jQuery-Validation-Plugin

You could call your validate function everytime an input changes:

$('#form1 input').change(validateForm);

Using

$("#form1 input").on('change,blur', validateForm); 

function validateForm() {
    // Caution : this refers to the HTMLElement
}

You shoud consider to use a jQuery form validation like library like http://formvalidator/ or http://jqueryvalidation/ or create yours.

Cheers

So I guess you want to do frontend validation with Javascript. There are wrapped library to do this. E.g., validate.js, verifyjs, and this one, ...

And you can bind the validation process on the blur event of an input JQuery validate is a good choice with clear documentation. You just need to download the .js library and place it somewhere under your web folder, and using tag to include it. And call the .validate() function on the form you want to validate. That should be done.

$('input').on('blur', function(){
    $("#myForm").validate();
});

本文标签： javascriptHTML5 form validation without submit buttonStack Overflow