Проверка формы не работает в codeigniter с использованием скрипта java

Question

Я работаю над Codeigniter и проверяю форму, используя скрипт java. Мой файл просмотра

<div class="container">
    <div class="limiter">
        <div class="container-login100">
            <div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-50" >
                <form class="login100-form" action="<?php echo base_url('index.php/Customer/addCustomer') ?>" method="post">
                    <h2 class="login100-form-title p-b-33"> Add Admin </h2>

                      <div class="form-group ">
                        <label class="control-label col-md-2 col-sm-6 col-xs-12" >First Name:</label>
                        <input class="input100" type="text"  id="first_name" placeholder="Enter first_name" name="first_name"/>
                        <span id="errorfirstname"></span>
                    </div>

                    <div class="container-login100-form-btn m-t-20">
                        <input type="submit" class="btn btn-dark login100-form-btn" id="save" name="save" value="Save" onclick="validation()"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

и java Код скрипта

function validation() {
    if (document.getElementById("first_name").value == "") {
        var str = ("First Name may not be blank");
        document.getElementById("errorfirstname").innerHTML = str;
    } else if (document.getElementById("first_name") != /^[a-zA-Z ]*$/) {
        var str = ("Please Enter Only Characters in First name");
    } else if (document.getElementById("first_name")) {
        var inpObj = document.getElementById("first_name");
        if (inpObj.value.length <= 30 && inpObj.value.length >= 3) {
            var str = ("Please Type Minmum 3 Characters Maximum 30 Characters ");
            document.getElementById("errorfirstname").innerHTML = str;
        }
    } else {
        var str = "Input is Not valid";
        document.getElementById("errorfirstname").innerHTML = str;
    }
}

. я отправляю форму, которая происходит javascript после проверки, она не возвращает ошибку, а идет в файле контроллера. Я хочу, чтобы при проверке произошла ошибка, вернитесь на страницу просмотра и не переходите к контроллеру

Answer 1

Вы должны вернуть false при проверке, если она не прошла. Вы также пропускаете оператор return в onclick. Это должно вызвать подтверждение типа onclick="return validation();"

  function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
      alert("Name must be filled out");
      return false;
    }
  }

Для получения дополнительной информации см. Здесь: JS Проверка .

Однако я бы порекомендовал вам использовать готовый решение, подобное Подтвердить. js или Петрушка . Они опробованы и протестированы, охватывают большинство угловых случаев, которые мы склонны забывать, одобрены сотнями других разработчиков и экономят время разработки.

Answer 2

Пожалуйста, добавьте идентификатор формы в тег формы как «идентификатор формы». И используйте приведенное ниже решение.

document.querySelector("#form-id").addEventListener('submit', (e) => {
    //prevent actual submit
    e.preventDefault();

    //Get form values
    const first_name = document.querySelector("#first_name").value;

    const errorfirstname = document.querySelector("#errorfirstname");
    const letters = /^[a-zA-Z ]*$/;

    if (first_name === "") {
        errorfirstname.className = "alert alert-danger";
        errorfirstname.innerHTML = "First Name may not be blank";
    } else if (!first_name.match(letters)) {
        errorfirstname.className = "alert alert-danger";
        errorfirstname.innerHTML = "Please Enter Only Characters in First name";
    } else if (first_name.length < 3 || first_name.length > 30) {
        errorfirstname.className = "alert alert-danger";
        errorfirstname.innerHTML = "Please Type Minmum 3 Characters Maximum 30 Characters";
    } else {
        e.submit();
    }
});