Form validation is not working in codeigniter using java script

Question

I am working on Codeigniter and validate form using java script my view file is

<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>

and java script code is

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;
    }
}

my actual problem is when i am submit the form it going on javascript after validation its not return error but its going on controller file i want to if validation is fail return on view page and not going on to controller

You need to add "return false" if there is an error to prevent the default form action, which is to submit the form. — Node_Ninja
– Node_Ninja, Commented Jan 22, 2020 at 11:05

Evgenii Klepilin · Accepted Answer · 2020-01-22 11:09:38Z

1

You have to return false on validation if it doesn't pass. You are also missing a return statement in onclick as well. It should call for validation like onclick="return validation();"

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

Refer here for more information: JS Validation.

I would however recommend you to use a ready-made solution like Validate.js or Parsley. They are tried and tested, cover most corner cases which we tend to forget, approved by hundreds of other developers, and save development time.

answered Jan 22, 2020 at 11:09

Evgenii Klepilin

6952 gold badges8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mahesh Sanjay Tirmali · Accepted Answer · 2020-01-22 11:51:36Z

Please add form id in form tag as 'form-id'.And use below solution.

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();
    }
});

Collectives™ on Stack Overflow

Form validation is not working in codeigniter using java script

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related