CODEWITHSUNDEEP
javascriptphphtml
Marcus
Marcus

Reputation: 6717

php validate X number of input fields

I'm printing database content on a HTML page like this:

<form name="result_form" action="dostuff.php" onsubmit="return validateResult()" method="post">

    <table>

    <?php
    $my_object_array = getStuffFromDatabase();
    for ($x = 0; $x < count($my_object_array ); $x++) {
        echo '<tr>';
        echo '<td>';
        echo 'Hemmalag:  <input type="number" id="result' . $x. '" name="result' . $x . '" value = "' . $my_object_array[$x]->getResult(). '"></input>';
        echo '</td>';
        echo '</tr>';
        }
        ?>

    </table>

    <button type="submit">Save</button>

</form>

I would like to validate all these input elements using javascript. The fields are gonna be checked as not being empty. I won't use required since Safari doesn't support it. I'm thinking something like:

form_validate.js:

function validateResult(){
    var row_count = document.getElementById("row_counter").value;
    var validate_success = true;
    for (i = 0; i < row_count; i++) {
        var tmp_home_result = document.getElementById("result" + i).value;

        if(tmp_home_result == "" || tmp_home_result == null){
            validate_success = false;
        }
    }
return validate_success;
}

However, this doesn't seem to work. The form is still being shipped off to the server. What's wrong here?

Upvotes: 0

Views: 65

Answers (2)

Sunil Pachlangia
Sunil Pachlangia

Reputation: 2071

Where is "show_result_new_result_home_team" id you need to give this to input box also. Hope this will work.

I have edit your script and it's working fine. Please use this.

function validateResult(){
   var row_count = document.getElementById("row_counter").value;
   for (i = 0; i < row_count; i++) {
      var tmp_home_result = document.getElementById("result" + i).value;
      if(tmp_home_result == "" || tmp_home_result == null){
         return false;
      }
   }
    return true;
}

Upvotes: 1

Indra Kumar S
Indra Kumar S

Reputation: 2934

Try validate.js jquery plugin

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<form class="cmxform" id="commentForm" method="get" action="">
   <fieldset>
      <legend>Please provide your name, email address (won't be published) and a comment</legend>
      <p>
         <label for="cname">Name (required, at least 2 characters)</label>
         <input id="cname" name="name" minlength="2" type="text" required>
      </p>
      <p>
         <label for="cemail">E-Mail (required)</label>
         <input id="cemail" type="email" name="email" required>
      </p>
      <p>
         <label for="curl">URL (optional)</label>
         <input id="curl" type="url" name="url">
      </p>
      <p>
         <label for="ccomment">Your comment (required)</label>
         <textarea id="ccomment" name="comment" required></textarea>
      </p>
      <p>
         <input class="submit" type="submit" value="Submit">
      </p>
   </fieldset>
</form>
<script>
   $("#commentForm").validate();
</script>

Upvotes: 0

Related Questions