Checking if required fields have been entered

Question

I have a form in a php file.

Within that form is a table with a required SELECT element and a required INPUT TEXT element.

Also beneath the table I have a submit button.

The submit works flawlessly checking if the required fields in the form have values and alerts the user of whichever elements require values.

PROBLEM:

I would like for another button to basically do the check that the submit button does, i.e. alert me of which ever required fields require values BUT NOT submit the form.

BASICALLY:

What functions are called when I click the submit button so that I can use the method that checks the form for completion.

ContactCard.php

<?php
    require_once("config.php");

    //Connect to our database
    $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

    //Return an error if we have connection issues
    if ($mysqli->connect_error)
    {
        die('Connect Error (' . $mysqli->connect_errno . ') '. $mysqli->connect_error);
    }

    //Query the database for the results we want
    $query = $mysqli->query("SELECT field FROM `contact_fields`");

    //Create an array of objects for each returned row
    while($array[] = $query->fetch_object());

    //Remove the blank entry at end of array
    array_pop($array);

    //Print our array results
    //print_r_html($array);
?>

<?php
    //Free result set and close connection 
    $query->close();
    $mysqli->close();
?>

<html>
<head>
<title>Add a Contact</title>
<link <link rel="stylesheet" type="text/css" href="ContactCard.css">
<script>
function addOptRow()
{

    var optTable        = document.getElementById("optTable");
    var optTableRows    = optTable.rows.length;
    var newOptRow       = optTable.insertRow(optTableRows);


    //create the dropbox fields for the new row
    var optFieldNames   = document.createElement("select");
    optFieldNames.name  = "optFieldNames";
    optFieldNames.options[optFieldNames.options.length] = new Option("",null);
    "<?php foreach($array as $option) : ?>"
        optFieldNames.options[optFieldNames.options.length] = new Option("<?php echo $option->field; ?>",null); 
    "<?php endforeach; ?>"  
    var optFieldNamesCell   = newOptRow.insertCell(0);
    optFieldNamesCell.appendChild(optFieldNames);

    //create the field value for the new row
    var optFieldValue   = document.createElement("input");
    optFieldValue.type  = "text";
    optFieldValue.name  = "optFieldValue";
    optFieldValue.required  = "true";
    var optFieldValueCell   = newOptRow.insertCell(1);
    optFieldValueCell.appendChild(optFieldValue);

    //create the field remove for the new row
    var optFieldRemove  = document.createElement("input");
    optFieldRemove.type = "button";
    optFieldRemove.value    = "Remove";
    optFieldRemove.onclick  = function(){removeOptRow(this);}
    var optFieldRemoveCell  = newOptRow.insertCell(2);
    optFieldRemoveCell.appendChild(optFieldRemove);
}

function removeOptRow(removeButton)
{
    var optTable = document.getElementById("optTable");
    optTable.deleteRow(removeButton.parentNode.parentNode.rowIndex);
}

function checkAllFieldsComplete()
{
    //if(!isset( stuck here :(
}
</script>

</head>

<body>
    <h1 id="title" >Add A Contact</h1>

    <form>  
    <fieldset id="reqFields">
    <legend>Required Fields</legend>
    <table id="reqTable">
    <tr>
        <td>Company Name</td><td><input type="text" required></input></td>
    </tr>
    <tr>
        <td>Company Code</td><td><input type="text" required></input></td>
    </tr>
    </table>
    </fieldset>


    <fieldset id="optFields">
    <legend>Optional Fields</legend>
    <table id="optTable">
    <tr><th></th><th></th><th><input type="button" value="Add" onclick=addOptRow()></button></th></tr>  
    </table>
    </fieldset> 
    <input type="submit"></input>   
    </form> 


    <div id="test" name="test">
    </div>
</body>

</html>

post your code.. how your validation works currently. is it serverside or or in js? — Mithun Satheesh, Feb 13 '13 at 12:49
if you really want to see the file i don't mind, i've attached it to my OP. — Craig Wayne, Feb 13 '13 at 12:52
the form doesn't even have an action, and that's fine for **NOW**. It provides a popup for every field that i have not entered a value for. Which is awesome! Basically I just want to do the check to see if any of the required elements have values. Dynamically is possible. The submit button does this, so why can't I :( without submittting. — Craig Wayne, Feb 13 '13 at 12:56
http://stackoverflow.com/questions/11866910/how-to-force-a-html5-form-validation-without-submitting-it-via-javascript-jquery — Mithun Satheesh, Feb 13 '13 at 13:10
thanks, but nope that's not it. I don't want to create my own method, instead call the method that submit calls. — Craig Wayne, Feb 13 '13 at 13:25
put a new `input` filed of type `button` instead of `submit`. Then `onclick` of that button should fire a `js function`. Which takes elements by `document.getelementBtId` and does comparison with criteria you have. what is stoping you brother ? — Mithun Satheesh, Feb 13 '13 at 14:03

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

you can do it in many ways first use form validation by using required

<input type="text" required>

you can use java script for client side validation for instant response if not filled you will find many solution for that too

javascript validation for empty input field

else you have to do it on server side

edited May 23 '17 at 12:32

Community

1
1

answered Feb 13 '13 at 12:48

rohitarora

1,380
2
13
20

i have that rohitarora, thanks, but i would like to check which of the **REQUIRED** fields have values without clicking the submit button, is that possible? – Craig Wayne Feb 13 '13 at 12:57

score 0 · Answer 2 · answered Feb 13 '13 at 12:48

To answer your question on "html" you can call the javascript when you click on button on this way:

<input type="submmit" onclick="java_validation_function();" />

Basically you have 2 possibilities:

Post everything to your PHP and check there if the POST variables exists and return an error page if doesn't
Use javascript to check before submit to server. You can use jquery validation for that and call the jquery validation on onclick parameter from INPUT.

Here you will find a jquery/validation example: http://docs.jquery.com/Plugins/Validation

as amazing as jquery is, i don't want to add libraries to do something that already exists — Craig Wayne, Feb 13 '13 at 13:25

score 0 · Answer 3 · edited Jun 23 '16 at 21:20

0

You can do it like this with a script.

It checks if validate returns true or false.

$('#send').click(function(e) {
    e.preventDefault();
    if (validate()) {
        $('#myForm').submit();
    }
});

This function returns true or false. If the input with id="field" is empty it returns false.

function validate() {
    ok = true;

    if ($('#field').val() == "") {
        $('#field').attr({
            placeholder: 'Required'
        });
        ok = false;
    }
    return ok;
}

edited Jun 23 '16 at 21:20

ryanpcmcquen

6,285
3
24
37

answered Feb 13 '13 at 12:59

Lewis

225
1
6
18

i think this is exactly what i want, let me try it out. – Craig Wayne Feb 13 '13 at 13:00
i appreciate the suggestion user, i actually misread your suggestion. You see there's obviously a built in function \ method that does form validation once i click the submit button, just trying to figure it out. – Craig Wayne Feb 13 '13 at 13:13
If you want an other button to check if the form is filled in. Just use the same code I gave you but use $("#checkButton").click instead of the submit button. Or did I misinterpreted your question? – Lewis Feb 13 '13 at 23:13

Checking if required fields have been entered

3 Answers3