CODEWITHSUNDEEP
javascriptjqueryhtml
Furqan Tariq
Furqan Tariq

Reputation: 73

jquery function keeps running after submit

I am very new to HTML5 and JS and am running into this trouble:

I am trying to show custom validation messages after clicking the submit button. It works fine, for instance if the name field is empty it will show my custom message after pressing the button. However, after pressing the button the message keeps on popping up as I fill up the field.

Also this only happens when I am on that current field. For instance if I click the mouse somewhere else on the page and then back on the field the message stops popping up

Try to run the below snippet and hopefully you can understand the problem.

<!DOCTYPE html>
<html>

<head>
  <meta charset="ISO-8859-1">
  <title>WORKING WITH FORMS IN HTML5</title>


  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="jquery.h5validate.js"></script>



  <style>
    @charset "UTF-8";
    input:required+label:AFTER {
      content: "*";
      color: red
    }
    input:focus:invalid {
      background-color: pink;
    }
    input:focus:valid {
      background-color: #E5FFCC;
    }
    input:valid {
      border-color: green;
    }
    input:invalid {
      border-color: red;
    }
    input:optional {
      border-color: silver;
    }
    input:focus:optional {
      background-color: transparent;
    }
    #subb {
      border-radius: 25px;
      width: 200px;
      height: 50px;
      background-image: linear-gradient(to right, black 0%, white 100%);
      color: black;
      opacity: 0.8;
    }
    [data-Required] {
      color: blue;
      font-size: 20px;
    }
  </style>

  <!--
<script>
function test(){

	var elements = document.getElementsByTagName("INPUT");
	for(var i = 0 ; i < elements.length; i++){
		if(elements[i].validity.valueMissing){
			elements[i].setCustomValidity("Dont leave me hanging :(");
		}
		else if(elements[i].validity.patternMismatch){
			elements[i].setCustomValidity("Follow the pattern my friend");
		}
		else if(elements[i].validity.typeMismatch){
			elements[i].setCustomValidity("Wrong type!!!");
		}
		else{
			elements[i].setCustomValidity("");
		}
	}

}
</script>	
-->

  <script>
    $(document).ready(function() {


      var elements = $("input");
      for (var i = 0; i < elements.length; i++) {
        if (elements[i].validity.valueMissing) {
          elements[i].setCustomValidity("Dont leave me hanging :(");
        } else if (elements[i].validity.patternMismatch) {
          elements[i].setCustomValidity("Follow the pattern my friend");
        } else if (elements[i].validity.typeMismatch) {
          elements[i].setCustomValidity("Wrong type!!!");
        } else {
          elements[i].setCustomValidity("");
        }
      }

      $('#myform').Submit();
    });
  </script>






</head>

<body>
  <form id="myform">
    <input data-Required class="error" type="text" required id="name" placeholder="John Doe">
    <label for="name">Full Name</label>
    <br>
    <br>

    <input data-Required type="email" required id="email" placeholder="[email protected]">
    <label for="email">Email</label>
    <br>
    <br>

    <input data-Required type="phone" required id="phonenumber" pattern="\d\d\d\d\-\d\d\d\d\d\d\d" placeholder="0300-0000000">
    <label for="phonenumber">Mobile Phone Number</label>
    <br>
    <br>



    <input type="text" id="address" placeholder="houseno,streetno,societyname,cityname">
    <label for="address">Address</label>
    <br>
    <br>

    <input type="button" value="Submit" id="subb">
  </form>



</body>

</html>

Upvotes: 1

Views: 132

Answers (2)

sumitmann
sumitmann

Reputation: 393

The popping of validation message is due to html5's default validations feature offered by browser.

As i can see you have used h5validate.js plugin

using this you can stop default validation and write your own custom validation messages. 

$('#frm').h5Validate({
            errorClass:'black'
        });

http://jsfiddle.net/30385w63/

See if it helps you :)

Upvotes: 0

VPK
VPK

Reputation: 3090

Firstly, in order to better control your validations, you should use <input type="button" value="Submit" id="subb"> instead of type submit and give your form an id say formId. Finally after all your validations are cleared you can submit your form as below,

$('#formId').submit();

Upvotes: 1

Related Questions