stackoom
  简体   繁体   中英

Form validation is not working properly when clicking submit button?

 原文  2015-06-10 05:56:18  9   1    javascript/ jquery/ html5

Question

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----------->

1 answers

solution1
 1 ACCPTED  2015-06-10 06:04:51

在第二个示例中，您正在使用嵌套表格。尝试删除嵌套表格，它将起作用

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Submit form when Clicking “Enter” button, with validation addEventListener 'submit' working properly when clicking on button but not when pressing enter Angular 7 Form Validation does not show error when clicking submit button Form data validation not working when omitting a submit button Form not submitting when clicking submit button Quiz not working properly, after clicking the submit button, nothing happens Email validation function not working properly with form button When clicking the Submit button on my web form, how come the validation errors for the Input fields display, even when these fields have values? Submit button not working properly form post by clicking “no submit” button
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM