IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

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:

Bootstrap 4

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

Llibreries javascript

Bootstrap validator

Bootstrap validator

'Recursos':

Exemples

Plantilles bootstrap

AdminLTE

Vegeu AdminLTE la secció forms:

https://almsaeedstudio.com/preview

Vegeu també

Enllaços externs