title: string pattern validation in html
body: <p>I used to write a code for passing strings into an api. This stings must satisfy some pattern and then if it satisfies the pattern it has to call an api by clicking a button to store this strings.</p>
  
  <p>
       passing string to database </p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt; 
  &lt;style&gt; 
  body{
    background: url("images/background.jpg");
    background-size: cover;
   }
  </code></pre>
  
  <p></p>
  
  <p>
      </p>
  
  <pre><code>&lt;div class="data" &gt;
     &lt;h1&gt;SignUp Here&lt;/h1&gt;
  
          &lt;form   method = "POST" &gt;
  
          &lt;p&gt;Username&lt;/p&gt;
          &lt;input type="text" name="citycode" placeholder="Enter citycode"   id="citycode"  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 6 or more characters"&gt;
          &lt;p&gt;Password&lt;/p&gt;
           &lt;input type="code2" name="countrycode" placeholder="Enter countrycode" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 6 or more characters" id="countrycode"&gt;
          &lt;button type="submit" name="submit" onclick="myFunction()"&gt;Submit&lt;/button&gt; &lt;/br&gt; &lt;/br&gt; &lt;/br&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;script type="text/javascript"&gt;
  
  function myFunction() {
    var citycode, countrycode;
    city = document.getElementById('citycode').value;
    country = document.getElementById('countrycode').value;
    var xhttp = new XMLHttpRequest();
    var url = "https://my api url";
    var sending = JSON.stringify({
      "citycode": city,
      "countrycode": country
    });
    xhttp.open("POST", url, true);
    xhttp.send(sending);
    xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 &amp;&amp; xhttp.status == 200) {
        console.log("status success");
        alert(xhttp.responseText);
      }
    };
    //}
  }
  
  &lt;/script&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>when I am clicking submit button, it is checking and showing the pattern matching result but data is passing in both valid and invalid cases.</p>
  
  <p>can any one help me to fix this.</p>