Menu icon Foundation
Refresh form on click of cancel button

Hi all,

In foundation 4, I have a form where on submit click I have added required validation message for text box using data-abide.

In the form when text box is blank and then click on submit button, required message appears. Then I click on cancel button, the popup will close and after that if I again open that popup without refreshing page, it will show required validation message which appeared on submit click previously.

But I want to remove this message on click of cancel button without refreshing page.

I don't want to refresh or reload the page just only refresh form of popup using jquery.

I have applied this solution as mentioned in below script but it does not clear validation message.

Thanks in advance.

<form id="form_add" data-abide method="post" action="Posturl">
   <div class="row">
        <div class="large-12 small-12 columns">
            <h4><b >Add Name</b></h4>
        </div>
        <div class="large-12 small-12 columns">
            <label >Name</label><br />

    		<input type="text" name="name" id="insert" tabindex="1" required> 

            <small class="error">Required</small>

            <div><p></p></div>			
        </div> 
       
		   <button type="submit" id="save" class="button1 round" tabindex="2">Save</button>
		
       
		   <button type="button" id="cancel" class="button1 round" tabindex="3">Cancel</button>		
			
    </div>        
    

</form>



    
<script>
$("#cancel").click(function () {
   $('#form_add')[0].reset();
    $("#insert").text("");
});
<script>

abideform.netmvcvalidation

Hi all,

In foundation 4, I have a form where on submit click I have added required validation message for text box using data-abide.

In the form when text box is blank and then click on submit button, required message appears. Then I click on cancel button, the popup will close and after that if I again open that popup without refreshing page, it will show required validation message which appeared on submit click previously.

But I want to remove this message on click of cancel button without refreshing page.

I don't want to refresh or reload the page just only refresh form of popup using jquery.

I have applied this solution as mentioned in below script but it does not clear validation message.

Thanks in advance.

<form id="form_add" data-abide method="post" action="Posturl">
   <div class="row">
        <div class="large-12 small-12 columns">
            <h4><b >Add Name</b></h4>
        </div>
        <div class="large-12 small-12 columns">
            <label >Name</label><br />

    		<input type="text" name="name" id="insert" tabindex="1" required> 

            <small class="error">Required</small>

            <div><p></p></div>			
        </div> 
       
		   <button type="submit" id="save" class="button1 round" tabindex="2">Save</button>
		
       
		   <button type="button" id="cancel" class="button1 round" tabindex="3">Cancel</button>		
			
    </div>        
    

</form>



    
<script>
$("#cancel").click(function () {
   $('#form_add')[0].reset();
    $("#insert").text("");
});
<script>

Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Howdy!

Take a look at this Pen I made: http://codepen.io/winghouchan/pen/sBief

And here is the script you need:

$(".clear").on("click",function(){
  $("form div").removeClass("error");
  $("form label").removeClass("error");
  $("form")[0].reset();
});

Basically you need to remove .error from the label and the div.

Wing-Hou Chan over 5 years ago

Howdy!

Take a look at this Pen I made: http://codepen.io/winghouchan/pen/sBief

And here is the script you need:

$(".clear").on("click",function(){
  $("form div").removeClass("error");
  $("form label").removeClass("error");
  $("form")[0].reset();
});

Basically you need to remove .error from the label and the div.

Geetanjali over 5 years ago

Hii

Here is updated code :

<div id="addPopup" class="reveal-modal auto">
<form id="form_add" data-abide method="post" action="Posturl">
   <div class="row">
        <div class="large-12 small-12 columns">
            <h4><b >Add Name</b></h4>
        </div>
        <div class="large-12 small-12 columns">
            <label >Name</label><br />

        <input type="text" name="name" id="insert" tabindex="1" required> 

            <small class="error">Required</small>

            <div><p></p></div>      
        </div> 

       <button type="submit" id="save" class="button1 round" tabindex="2">Save</button>


       <button type="button" id="cancel" class="button1 round" tabindex="3">Cancel</button>    

    </div>        


</form>
</div>



<script>
$("#cancel").click(function () {
    $("#insert").text("");
    $('#form_add')[0].reset();
    $("form div").removeClass("error");
    $("form label").removeClass("error"); 
    $("form")[0].reset()
    $('#addPopup').foundation("reveal", "close");

});
<script>

Thanks, your solution helped me in fixing my issue but still the validation appears ie. when I enter value in textbox and hit cancel button value gets clear by using script as mentioned below but when I again reopen the form without refreshing page it gives required validation.

Wing-Hou Chan over 5 years ago

I experimented in CodePen, placing the form in a modal in an attempt to recreate your situation. Unforunately I couldn't recreate the situation.

Could you post a link to the site in development so we can diagnose the problem?

Also in the script you can remove $("form")[0].reset(); because you already wrote $('#form_add')[0].reset();.