How to run this jquery function with input type button

Question

How can i perform this jquery validation with input type button ? when i switch to input type submit it's working, but i don wan input type submit because submit button will always reload my screen with modernizr.custom.js UI. Please help, thanks.

<script src="js/modernizr.custom.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
         $(document).ready(function() {
           $('#submit').click(function (e) {
               var isValid = true;
               $('#VEHNO').each(function () {
                if ($.trim($(this).val()) == '') {
                    isValid = false;
                    $(this).css({
                           "border": "1px solid red",
                           "background": "#FFCECE"
                           });
                  }
                 else {
                     $(this).css({
                             "border": "",
                             "background": ""
                                });
                      }
                 });
                 if (isValid == false)
                      e.preventDefault();
                   });
     });
       </script>

html

<input type="text" class="input-name" id="VEHNO" name="VEHNO" type="text" />
<input type="button" value="Submit" name="submit"/>

Keep in mind, that a form can be submitted without using the submit button. For example pressing the Enter key. — Ron van der Heijden
– Ron van der Heijden, Commented Jul 22, 2015 at 11:16

Raghvendra Kumar · Accepted Answer · 2015-07-22 11:13:24Z

2

You are trying to use jQuery Id selector for a button but you have not assigned an id to your button, after you attach an id, it will work fine.

    $(document).ready(function () {

         $('#someId').click(function () {

             var isValid = true;

             $('#VEHNO').each(function () {
                 if ($.trim($(this).val()) == '') {
                     isValid = false;
                     $(this).css({
                         "border": "1px solid red",
                             "background": "#FFCECE"
                     });
                 } else {
                     $(this).css({
                         "border": "",
                             "background": ""
                     });
                 }
             });

             if (isValid == false)
                          e.preventDefault();

         });


     });

<input type="text" class="input-name" id="VEHNO" name="VEHNO" type="text" />
<input type="button" value="Submit" id="someId" name="submit" />

Working demo is here : http://jsfiddle.net/qrj0qqrj/

answered Jul 22, 2015 at 11:13

Raghvendra Kumar

1,4181 gold badge11 silver badges27 bronze badges

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

1 Comment

user3835327 Over a year ago

Thanks you @Raghvendra Kumar

Quentin · Accepted Answer · 2015-07-22 11:17:55Z

0

#submit

This is an id selector. It selects the element with the id attribute with the value submit.

<input type="button" value="Submit" name="submit"/>

This element doesn't have an ID.

The name isn't being used for anything. Change name to id.

<input type="button" value="Submit" id="submit"/>

answered Jul 22, 2015 at 11:17

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Darren Willows · Accepted Answer · 2015-07-22 10:27:21Z

-1

<input type="button" value="Submit" name="submit" id="submit" />

You can also add a return false; to the JS to stop the form submit and control it by JS.

answered Jul 22, 2015 at 10:27

Darren Willows

2,15615 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to run this jquery function with input type button

html

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

html

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related