Modal Button without form validation

Question

I have a modal function that is opened with a <button> although when opening the modal it gives a prompt for required form fields.

The required fields don't stop the modal from opening but show over the top and I would like them not to display when opening the modal.

I have attempted using formnovalidate on the button but that then makes the button a submit without validation and I don't want the button to submit the form.

Is there another way to do this?

 $(document).ready(function($) { $('#accordion').find('.accordion-toggle').click(function(){ //Expand or collapse this panel $(this).next().slideToggle('fast'); //Hide the other panels $(".accordion-content").not($(this).next()).slideUp('fast'); }); }); 

 /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #eee; margin: auto; padding: 20px; border: 1px solid #888; width: 50%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 48px; font-weight: bold; } .accordion-toggle { cursor: pointer; background-color: #eee; color: #444; cursor: pointer; padding: 10px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } .active, .accordion-toggle:hover { background-color: #ccc; } .accordion-content { display: none; padding: 0 18px; background-color: white; overflow: hidden; } .accordion-content.default {display: block;} .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } .collapsible { background-color: #777; color: white; cursor: pointer; padding: 5px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #555; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Trigger/Open The Modal --> <button id="myBtn" style="margin-left: 50px;">Help</button> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <p> <div id="accordion"> <p class="accordion-toggle">#AUTOREP</p> <div class="accordion-content default"> <p></p> </div> </div> </div> 

Answer 1

发现答案是使用类型设置为按钮的<input> ，这解决了我在表单验证提示中遇到的问题。