@model IEnumerable<FlexGridData.Sale>

<h1>
    CollectionView Validation
</h1>
<p>
    The <b>CollectionView</b> has a <b>getError</b> property
    that provides validation support.
    To use it, set <b>getError</b> to a function that takes
    two parameters containing the data item being validated
    and the property to validate, and returns a string describing
    the error condition or null if there are no errors.
</p>
<p>
    The <b>getError</b> property goes beyond basic HTML5 validation
    based only on the value itself (such as min, max, required,
    pattern, etc). It allows you to specify conditions that involve
    multiple properties.
</p>
<p>
    The <b>getError</b> property allows you to include the
    validation logic in the collection itself, rather than
    in the UI used for editing items.
    The same method can then be used by input forms or by
    controls such as <b>FlexGrid</b>.
</p>

<h2>
    FlexGrid Validation
</h2>
<p>
    <b>FlexGrid</b> uses the <b>CollectionView.getError</b>
    property by default. Try entering an invalid country or a
    negative number to see how the grid identifies the error
    and prevents the invalid entry from being committed:
</p>
@(Html.C1().FlexGrid().Id("theGrid")
    .Bind(b=>b.Bind(Model).DisableServerRead(true))
    .OrderBy("Country")
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Downloads").Header("Downloads");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
        cs.Add().Binding("Active").Header("Active");
    })
)

<h2>
    Forms Validation
</h2>
<p>
    You can use the the <b>CollectionView.getError</b> property
    to validate forms as well. Simply call the function and
    apply the result to the appropriate input element using the
    <b>setCustomValidity</b> method that is part of the HTML5
    validation API.
</p>
<form id="theForm" class="form-inline">
    <div class="form-group">
        <b>Country</b>
         <input id="Country" type="text" class="form-control" required value="US">
    </div>
    <div class="form-group">
        <b>Downloads</b>
        <input id="Downloads" type="number" class="form-control" required value="123">
        <b>Sales</b>
        <input id="Sales" type="number" class="form-control" required value="123">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>  