Form validation (S'ha redirigit des de: Form Validation)

 Compartiu 

Server side

Vegeu Laravel form validation

Browser side

IMPORTANT: No utilitzeu la validació del costat del client/navegador per a substituir validacions de seguretat al servidor

Vegeu un exemple amb "Javascript a pelo"

http://www.w3schools.com/js/js_validation.asp

Fent ús de l'esdeveniment onSubmit. Recomano l'ús d'alguna llibreria...

HTML 5

Remember, since Bootstrap utilizes the HTML5 doctype, all inputs must have a type attribute.

Notes

• El atribut required:
• Nous tipus de input types:
• Other HTML5 INPUT types
• Styling valid/invalid inputs using CSS
• Sample styling using images and sprites
• Fallback for the placeholder attribute
• INPUT patterns for different data types

Nous tipus de input types:

Email, telephone & URL input types

Vegeu:

http://caniuse.com/#search=form%20validation

Polyfill

Internet explorer 9 o anterior vegeu H5F:

https://github.com/ryanseddon/H5F

CSS validation

Hi ha noves CSS pseudo-classes com valid i invalid

<style type="text/css">

  input:required:invalid, input:focus:invalid {
    background-image: url(/images/invalid.png);
    background-position: right top;
    background-repeat: no-repeat;
  }
  input:required:valid {
    background-image: url(/images/valid.png);
    background-position: right top;
    background-repeat: no-repeat;
  }

</style>

També podeu veure una plantilla com [[AdminLTE]] a l'apartat forms.

 https://almsaeedstudio.com/preview

Bootstrap

Exemple bàsic:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Validation states:

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

http://getbootstrap.com/css/#forms-control-validation

Recursos:

• http://getbootstrap.com/css/#forms

Bootstrap 4

http://v4-alpha.getbootstrap.com/components/forms/

Llibreries javascript

• Jquery Validation
• jqBootstrapValidation
• Validator
• BootstrapValidator/ ara FormValidation

Bootstrap validator

Bootstrap validator

'Recursos':

• http://1000hz.github.io/bootstrap-validator
• https://github.com/1000hz/bootstrap-validator
• https://github.com/1000hz/bootstrap-validator/tree/master/dist

Exemples

• http://indianapoliswebsite.blogspot.com.es/2014/03/bootstrap-form-validation-glyphicons.html

Plantilles bootstrap

AdminLTE

Vegeu AdminLTE la secció forms:

https://almsaeedstudio.com/preview

Vegeu també

• Forms
• Validation/Form validation
• Laravel form validation
• HTML/HTML5
• HTML form/HTML 5 form
• CSS3
• Javascript

Enllaços externs

• http://formvalidation.io/
• https://github.com/nghuuphuoc/bootstrapvalidator
• http://www.w3.org/TR/html5/forms.html#client-side-form-validation
• http://diveintohtml5.info/forms.html
• https://24ways.org/2009/have-a-field-day-with-html5-forms
• http://www.the-art-of-web.com/javascript/validate/
• http://alistapart.com/article/inline-validation-in-web-forms