javascript form validations

Question

I am using javascript validations for required field. Here is my html

<form class="uk-form-stacked" name="myForm"  action="<?php echo base_url(); ?>admin/pages/create_service"  id="wizard_advanced_form" method="post" enctype="multipart/form-data" onsubmit="return myFunction(this)" novalidate>
                    <div data-uk-grid-margin="" class="uk-grid">
                    <div class="uk-width-medium-1-2">
                        <label for="service_title">Service Title<span class="req">*</span></label>
                        <input type="text"  name="service_title" id="validd"  class="md-input"  />
                        <p id="demo"></p>
                    </div>
                </div>
                    <div class="uk-grid">
                    <button type="submit" class="md-btn md-btn-primary md-btn-wave-light waves-effect waves-button waves-light" >Submit</button>
                </div>
            </form>

my javascript is

    <script>
    function myFunction(form) {
   var x, text;
   x = document.getElementById("validd").value;
   if (x == null || x == "") {
    text = "Input not valid";

   }
     document.getElementById("demo").innerHTML = text;
     return false;

     }
     </script>

Now when my input field is empty and i submit form it shows me input not valid that is fine. but even when i fill some textin input then it shows me undefined in place of input not valid instead of submitting form. please help..

Reason is quiet simple, variable is defined as undefined, if condition is not satisfied then value remains undefined.. — Rayon
– Rayon, Commented Aug 19, 2016 at 5:21

SiddP · Accepted Answer · 2016-08-19 05:20:23Z

2

You forgot to add an else where it would return true if the condition is not satisfied.

 <script>
        function myFunction(form) {
       var x, text;
       x = document.getElementById("validd").value;
       if (x == null || x == "") {
        text = "Input not valid";
        document.getElementById("demo").innerHTML = text;
         return false;
       }
        else{
          return true;
       } 
         }
 </script>

answered Aug 19, 2016 at 5:20

SiddP

1,6712 gold badges15 silver badges40 bronze badges

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

Comments

Wtower · Accepted Answer · 2016-08-19 05:52:33Z

0

You can use instead:

    <html>
      <head>
        <script>
        function valid()
        {
           var x;
           x=document.getElementById(validd).value;
           if(x==null || x=="")
           {
              alert("Please input service title");
              document.getElementById(validd).focus();
              return false;
           }  
        }
      </script>
      </head>
      <body>
        <form name="myForm" onsubmit="return valid()">
          <input type="text" name="service_title" id="validd"/>
          <button type="submit">Submit</button>
        </form>
      </body>
    </html>`

edited Aug 19, 2016 at 5:52

Wtower

20.1k12 gold badges110 silver badges86 bronze badges

answered Aug 19, 2016 at 5:45

Shubham Thakare

1

2 Comments

Wtower Over a year ago

Please add more detail on how this helps.

Shubham Thakare Over a year ago

if we can use alert function instead of set text to textfield so it doesnt make any problem because alert function gives popup msg and after we say ok it close so it is better for form validation

Collectives™ on Stack Overflow

javascript form validations

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related