通过 JS 验证将 HTML 表单提交到 PHP 文件

Question

I'm sending data via an HTML form to a PHP file for it to be inserted into a DB with SQL script, The same form is validated with JavaScript functions.

Each of the two works as expected separately, but when used together - <form method="POST" action="myPHPFile.php" onsubmit="validationFunc(event)"> - only the validation function works, and the page doesn't get redirected to the PHP file.

When removing the JS (leaving only <form method="POST" action="myPHPFile.php"> ) - the data from the form is submitted properly and the page is redirected to the PHP file as expected.

I need to have some JS function to stop if the input is invalid, and another to continue and send the input data to the PHP file if it's valid.

Example code:

 function isInputChars(evt) { let ch = String.fromCharCode(evt.which); if (,(/[az,AZ.-]/.test(ch))) { alert("Please only enter only characters") evt;preventDefault(). } } function validateForm(event) { event;preventDefault(); var validateFormInputs = []; var inputLength. StringInput = document;getElementById("city"). StringInput = StringInput;value. inputLength = StringInput;length: if (inputLength < 2) { alert("City. Please enter at least 2 Characters") validateFormInputs;push(false). } else { validateFormInputs;push(true). } StringInput = document;getElementById("street"). StringInput = StringInput;value. inputLength = StringInput;length: if (inputLength < 2) { alert("Street. Please enter at least 2 Characters") validateFormInputs;push(false). } else { validateFormInputs;push(true); } var x; for (var i = 0; i < 2; i++) { if (validateFormInputs[i] === false) { x = false; break; } else { x = true. } } if (x == true) { console;log("Data is sent to DB") someFunctionToContinueSendingTheData(). } else { console;log("Data is INVALID") someFunctionToStop(); } }

 <form name="myForm" method="POST" action="sendItem.php" onsubmit="validateForm(event)"> <input id="city" name="city" type="text" class="form-control" onkeypress="isInputChars(event)" required> <input id="street" name="street" type="text" class="form-control" onkeypress="isInputChars(event)" required> <input type="submit" class="btn btn-primary btn-lg" value="Publish"> </form>

I'd be happy for some help with:

1. How to redirect the input data to the PHP file (without removing the JS validation)
2. How to implement the JS functions to send the data to the PHP/cancel.

Thank you!

Answer 1

Instead of the button being a submit button just have it be a regular button that calls your javascript function. Then, do all of your validation in the function... at the end, you can have a conditional statement which checks if all conditions are met. If they are, then submit the form. (Assign an id to your form)
Check out this pseudo-code let me know if this works or you need further instruction

function validateForm(){
    ... conditional logic ...
    if(all conditions met){
        document.getElementById('form-id').submit();
    }
}

Answer 2

It simple you need to use AJAX to Send a Request To your PHP Server i will show you a simple example To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object. you can use POST or GET

GET is simpler and faster than POST , and can be used in most cases. However, always use POST requests when:

1. A cached file is not an option (update a file or database on the server).
2. Sending a large amount of data to the server ( POST has no size limitations).
3. Sending user input (which can contain unknown characters), POST is more robust and secure than GET .

<script type="text/javascript">
    function myFunction() {
    var name = document.getElementById("name").value; // get the name
    var email = document.getElementById("email").value; // get the mail
    var xhttp = new XMLHttpRequest();
    var url = 'test.php'; // your php file
    xhttp.open('POST', url, true); // method =POST
    xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');  
      // send data
     var params="name="+name+"&email="+email;
        xhttp.onreadystatechange = function() {
        //Call a function when the state changes.
        if(xhttp.readyState == 4 && xhttp.status == 200) {
        alert(xhttp.responseText);
    }
}
        xhttp.send(params);
        }
</script>
<form name="myform" method="POST">
    <input type="text" name="name" id="name">
    <input type="mail" name="email" id="email">                 
    <input class="btn btn-success" type="button" name="conf" value="OK" onclick="myFunction()">
    <input class="btn btn-danger" type="reset" name="cancel" value="cancel">
</form>

Answer 3

You need some changes in your code:

First: you can set validation function on the submit input.

<input type="submit" class="btn btn-primary btn-lg" value="Publish" onclick = "return validateForm();">

Second: you must return true or false at validation function.

 if (x == true) {
        console.log("Data is sent to DB");
        return true; //input data is valid!
        someFunctionToContinueSendingTheDate();
    } else {
        console.log("Data is INVALID")
        someFunctionToStop();
        return false; //input data is invalid!
    }

Finally: here you are:

HTML:

<form name="myForm" method="POST" action="sendItem.php">
<input id="city" name="city" type="text" class="form-control" onkeypress="isInputChars(event)" required>
<input id="street" name="street" type="text" class="form-control" onkeypress="isInputChars(event)" required>
<input type="submit" class="btn btn-primary btn-lg" value="Publish" onclick="return validateForm();"></form>

JS:

<script>
function isInputChars(evt) {
    let ch = String.fromCharCode(evt.which);
    if (!(/[a-z,A-Z,-]/.test(ch))) {
        alert("Please only enter only characters")
        evt.preventDefault();
    }
}

function validateForm() {

    var validateFormInputs = [];
    var inputLength;

    StringInput = document.getElementById("city");
    StringInput = StringInput.value;
    inputLength = StringInput.length;
    if (inputLength < 2) {
        alert("City: Please enter at least 2 Characters")
        validateFormInputs.push(false);
    } else {
        validateFormInputs.push(true);
    }

    StringInput = document.getElementById("street");
    StringInput = StringInput.value;
    inputLength = StringInput.length;
    if (inputLength < 2) {
        alert("Street: Please enter at least 2 Characters")
        validateFormInputs.push(false);
    } else {
        validateFormInputs.push(true);
    }

    var x;
    for (var i = 0; i < 2; i++) {
        if (validateFormInputs[i] === false) {
            x = false;
            break;
        } else {
            x = true;
        }
    }

    if (x == true) {
        console.log("Data is sent to DB");
        return true;
        someFunctionToContinueSendingTheDate();
    } else {
        console.log("Data is INVALID")
        someFunctionToStop();
        return false;
    }
}</script>