jquery validate before serialize

Question

I'm trying to verify that certain fields in my form are numeric and not text. Where would I start ?

If the fields are numeric, then serialize, if not then send an empty string. The reason I want to do this is because PHP sees the data for each variable as a string and not numeric.

this is my ajax request

$.ajax({
      type: "POST",
      url: "lib/calc.php",
      data: $("#calcQuery").serialize(),
      dataType: "html",
      success: function(response)
       {
       $("#calcBox").html(response);
       $("#calcBox").show(); 
       clearForm("#calcQuery");

       },

this is my form

<form id="calcQuery" class="ui-widget-shadow ui-corner-all" style="margin-top: 1em;">
  <fieldset class="ui-corner-all" >
  <table border="0" width="85%">
   <tr>
    <th><nobr><label for="curr_alloc">Current Space Allocation:</label></nobr></th> 
    <td align="right"><input type="text" size="5" name="curr_alloc" id="curr_alloc" /></td>
   </tr>
   <tr>
    <td>
     <table border="0" style="margin-left: .5em;">
     <tr>
     <td>
     <input type="radio" name="curr_unit" value="KB" /><label>KB</label>
     </td>
     </tr>
     <tr>
     <td>
     <input type="radio" name="curr_unit" value="MB" /><label>MB</label>
     </td>
     </tr>
     <tr>
     <td>
     <input type="radio" name="curr_unit" value="GB" checked /><label>GB</label>
     </td>
     </tr>
     <tr>
     <td>
     <input type="radio" name="curr_unit" value="TB" /><label>TB</label>
     </td>
     </tr>
     </table>
    </td>
   </tr>

   <tr>
    <th><nobr><label for="curr_percent">Current Usage Percentage:</label></nobr></th> 

    <td align="right"><input type="text" size="5" name="curr_percent" id="curr_percent"  /></td>
   </tr>
   <tr>
    <th><nobr><label for="desired_percent">Desired Usage Percentage:</label></nobr></th> 

    <td align="right"><input type="text" size="5" name="desired_percent" id="desired_percent" /></td>

   </tr>
  </table>
  </fieldset> 

 </form>

Answer 1

You need to use the Validate plugin. It is quite easy to specify various rules on form submission.

Answer 2

As Vincent Ramdhanie mentioned, the validate plugin is a good option.

However, there are a few things I'd like to clarify:

The reason I want to do this is because PHP sees the data for each variable as a string and not numeric.

The types of each field value will ALSO be string as far as the javascript/DOM on your page is concerned. Therefore, even if the user enters a number, it's really just a string. So in either case you will need to parse the string into a number (or let a library do it for you).

The second, important thing to remember is that you cannot rely on clientside validation as it is easily bypassed/broken. You should really be validating the data on the server side, as well as on the client side.

Update

In response to your comment, I am not very familiar with PHP, but a quick googling shows me that this should work:

$foo = "3.123";
$bar = (float) $foo;

As I mentioned, I'm not a PHP programmer so there may be a better way to do it, but that should work.

Answer 3

If you'd rather not use a plugin, homebrewed validation is pretty simple for this type of constraint. You said "numeric" but didn't specify whether or not that's limited to integers, or any numeric type.

If the former is the case, use parseInt() and check the result using isNaN() (if it "failed" parseInt will return NaN). If the input is not limited to integers, you can just use parseFloat() and again check the result using isNaN.

If the validation succeeded, I'd recommend passing the output of whichever parse function, rather than the original input string, back to your PHP.

If the validation failed, you can choose to not send the form at all (and inform the user somehow) or, as you said, send an empty string back to the server.

Answer 4

Have you tried PHP's function is_numeric?