Custom validation bootstrap script-CodePudding

I have a bootstrap form. I want to do validation on this form with pattern for example only alphabet regex for name field My form validation does not work. where is problem?

const nameinp = document.getElementById('nameinp');
let isPasswordValid = false;
let en = nameinp.value;
const ptern = /^[A-Za-z] $/;
isPasswordValid = ptern.test(en);
(() => {
  'use strict'
  const forms = document.querySelectorAll('.needs-validation');

  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {

      if (!form.checkValidity() || !isPasswordValid) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')
    }, false)
  })
})()

<form id="Oform" action=""  novalidate>
  <label for=" OName">name</label>
  <input required id="nameinp" type="text" name="nameinp" id="OName" >
  <div >
    <label  for="IPrange"> family</label>

    <input required  type="text" name="" id="IPrange">
  </div>
  <button  id="submitbtn" type="submit">submit </button>
</form>

CodePudding user response：

You need to move the validation into the submit event.

Where you have it now it only tests the input when the form loads, not when it is filled and submitted

Also no need to do Array from

Lastly your test was testing the existence of ONE a-zA-Z

(() => {
  'use strict'
  document.querySelectorAll('.needs-validation')
  .forEach(form => {
    form.addEventListener('submit', event => {
      const nameinp = document.getElementById('nameinp');
      let isPasswordValid = false;
      let en = nameinp.value.trim();
      const ptern = /^[A-Za-z]*$/;
      isPasswordValid = ptern.test(en);
      console.log( isPasswordValid)
      if (!form.checkValidity() || !isPasswordValid) {
        event.preventDefault()
        event.stopPropagation()
        console.log('not valid')
      }
      // else // I would expect an else here 
      form.classList.add('was-validated')
    }, false)
  })
})()

<form id="Oform" action=""  novalidate>
  <label for=" OName">name</label>
  <input required id="nameinp" type="text" name="nameinp" id="OName" >
  <div >
    <label  for="IPrange"> family</label>

    <input required  type="number" max="254" min="1" name="" id="IPrange">
  </div>
  <button  id="submitbtn" type="submit">submit </button>
</form>

And if there is only one form then even less reason

(() => {
  'use strict'
  document.querySelector('.needs-validation')
    .addEventListener('submit', event => {
      const form = event.target;
      form.classList.remove('was-validated')
      form.classList.remove('invalid')
      const nameinp = document.getElementById('nameinp');
      let isPasswordValid = false;
      let en = nameinp.value.trim();
      const ptern = /^[A-Za-z]*$/;
      isPasswordValid = ptern.test(en);
      if (!form.checkValidity() || !isPasswordValid) {
        event.preventDefault()
        event.stopPropagation()
        form.classList.add('invalid')
      }
      else {
        form.classList.add('was-validated')
      }
    })
})()

.invalid { border: 1px solid red; }
.was-validated { border: 1px solid green; }

<form id="Oform" action=""  novalidate>
  <label for=" OName">name</label>
  <input required id="nameinp" type="text" name="nameinp" id="OName" >
  <div >
    <label  for="IPrange"> family</label>

    <input required  type="number" max="254" min="1" name="" id="IPrange">
  </div>
  <button  id="submitbtn" type="submit">submit </button>
</form>