0

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?

2
  • what is row_counter I don't see this element in your code. Why don't you validate it using PHP if this data comes from server? Commented Jan 9, 2015 at 13:02
  • Row counter is a hidden field in the form, the value is of the input is the total number of input elements in the form. I am doing both server side validation and client side validation. @Robert Commented Jan 9, 2015 at 21:10

2 Answers 2

1

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;
}
Sign up to request clarification or add additional context in comments.

Comments

0

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> 

1 Comment

This seems to be a simple enough problem to solve without a plugin

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.