CODEWITHSUNDEEP
javascriptjqueryhtml
merit students
merit students

Reputation: 1

Form validation is not working properly when clicking submit button?

For the 1st code while clicking submit button without filling any text it is showing as "Please fill out this field".
For the 2nd code it is not showing or submitting code while clicking submit button. I need submit button to show "Please fill out this field" while clicking on it.

<!------------------1st html code------------>
<html>

<body>
    <section id="contact-page">
        <div class="container">
            <div class="center" style="padding-top: 100px; border-bottom-width: 10px;padding-bottom: 50px;">
                <h2>Drop Your Message</h2>
                <p class="lead"><b><em>Education is the most powerful weapon we can use to change the world</em></b></p>
            </div>
            <div class="row contact-wrap" style="margin-top:00px;">
                <form action="sendemail.php" data-ajax="false" method="post" class="form">
                    <div class="col-sm-5 col-sm-offset-1">
                        <div class="form-group">
                            <label for="Name">Name *</label>
                            <input type="text" id="Name" name="name" class="form-control" required="required" placeholder="Enter your name">
                        </div>
                        <div class="form-group">
                            <label for="Email">Email *</label>
                            <input type="email" id="Email" name="email" class="form-control" required="required" placeholder="Enter email-id">
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone *</label>
                            <input type="tel" id="phone" name="phone" pattern="^\d{4}\d{3}\d{3}$" class="form-control" required="required" placeholder="Enter number">
                        </div>
                        <div class="form-group">
                            <label for="Subject">Subject *</label>
                            <input type="text" id="Subject" name="subject" class="form-control" required="required" placeholder="Enter subject">
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <label for="Message">Message *</label>
                            <textarea name="message" id="Message" name="Message" required="required" class="form-control" rows="9" placeholder="Enter message"></textarea>
                        </div>
                        <div class="form-group">
                            <button type="submit" name="submit" class="btn btn-primary btn-lg" required="required">Submit Message</button>
                        </div>
                    </div>
                </form>
            </div>
            <!--/.row-->
        </div>
        <!--/.container-->
    </section>
    <!--/#contact-page-->
</body>

</html>
<!-----------------------------------1st code completed------------>
<!---------------------2nd html code--------->
<html>

<body>
    <div class="row">
        <div class="col-sm-8">
            <div class="contact-form">
                <h2 class="title text-center">Get In Touch</h2>
                <div class="status alert alert-success" style="display: none"></div>
                <form id="main-contact-form" class="contact-form row" name="Enquiry-form" method="post" action="sendemail.php" data-ajax="false" style="margin-bottom: 0px;">
                    <div class="form-group col-md-6" style="padding-left: 30px;">
                        <input type="text" name="Name" id="Name" class="form-control" placeholder="Name" required="required">
                    </div>
                    <div class="form-group col-md-6">
                        <input type="tel" pattern="^\d{4}\d{3}\d{3}$" id="phone" name="phone" class="form-control" required="required" placeholder="Contact Number" style="width: 387px;">
                    </div>
                    <div class="form-group col-md-12">
                        <form name="myform" action="">
                            <input type="radio" id="radiobutton1" value="text1" style="margin-left: 15px; margin-right: 5px;" />
                            <input type="text" id="profession1" enabled="enabled" placeholder="Category of the Business if Self-employ" style="margin-left: 15px; width: 349px;" />
                            <input type="radio" id="radiobutton2" value="text2" style="margin-left: 30px;margin-right: 5px;" />
                            <input type="text" id="profession2" disabled="disabled" placeholder="Company name if Employee" style="margin-left: 15px; width: 345px;" />
                        </form>
                    </div>
                    <script>
                    var radiobutton1 = document.getElementById('radiobutton1');
                    var radiobutton2 = document.getElementById('radiobutton2');

                    radiobutton1.onchange = function() {
                        radiobutton2.checked = !this.checked;
                        document.getElementById('profession1').disabled = !this.checked;
                        document.getElementById('profession2').disabled = this.checked;

                    };

                    document.getElementById('radiobutton2').onchange = function() {
                        radiobutton1.checked = !this.checked;
                        document.getElementById('profession2').disabled = !this.checked;
                        document.getElementById('profession1').disabled = this.checked;
                    };
                    </script>
                    <div class="form-group col-md-4" style="width: 236px;">
                        <input type="text" name="productid" id="productid" class="form-control" required="required" placeholder="Product Id" style="width: 236px;">
                    </div>
                    <div class="form-group col-md-4" style="width: 269px; padding-left: 45px;">
                        <input list="Category" id="producttype " name="producttype" class="form-control" required="required" placeholder="Product Type" style="width: 269px;">
                        <datalist id="Category">
                            <option value="Consumer Products">
                                <option value="Cosmetics">
                                    <option value="Food Products">
                                        <option value="Energy Drinks">
                        </datalist>
                    </div>
                    <div class="form-group col-md-4" style="width: 236px; padding-left: 73px;">
                        <input type="text" name="Productquantity" id="Productquantity" class="form-control" required="required" placeholder="Product Quantity" style="width: 236px;">
                    </div>
                    <div class="form-group col-md-6">
                        <input type="email" name="Email" id="Email" class="form-control" required="required" placeholder="Email">
                        <br>
                        <textarea name="Message" id="Message" required="required" class="form-control" rows="5" placeholder="Comment Here" style="height: 114px;"></textarea>
                    </div>
                    <div class="form-group col-md-6" style="height: 144px;">
                        <textarea name="Shippingaddress" id="Shippingaddress" class="form-control" rows="5" placeholder="Shipping Address" required="required" style="height: 179px;"></textarea>
                    </div>
                    <div class="form-group col-md-12" style="padding-right: 0px; padding-left: 330px;">
                        <button type="submit" name="submit" class="btn btn-primary btn-lg" style="padding-left: 25px;" required="required">Submit Message</button>
                    </div>
                </form>
            </div>
        </div>
</body>

</html>
<!-----------------------------------2nd html code completed----------->

Upvotes: 0

Views: 193

Answers (1)

Mohit
Mohit

Reputation: 569

Here in the 2nd example you are using nested form.Try removing the nested form and It will work

Upvotes: 1

Related Questions