[Vue.js] Controler les champs d’un formulaire avec vue.js, puis les colorer si erreur avec bootstrap-vue.js

téléchargé.jpg

Introduction


Exemple de controle de champs avec vue.js, puis coloration des champs en erreur, avec bootstrap vue .

Etape un : Un formulaire pour app one page (pas de submit )


Tester le code ici .


	<html>
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=8" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Exo Vue.Js</title>
        
		<!------------------------------------------------------------ CHARGEMENT DES LIBRAIRIES ------------------------------------------------>
        
		<!-- development version, includes helpful console warnings -->
		<script src="js/vue.min.js"></script>
		
		<!------------------------------------------------------- FIN DE CHARGEMENT DES LIBRAIRIES ------------------------------------------------->
	</head>

<!-- La page HTML générale -->
<body >
	<div id="example-1">
		Liste générale
		<ul >
		  <li v-for="p in personnes">
			<button  v-on:click="choisir(p)" >+</button> {{ p.nom }} 
		  </li>
		</ul>
		
		Liste des personnes choisies
		<ul >
		  <li v-for="c in personnesChoisies">
			{{ c.nom }} 
		  </li>
		</ul>
	</div>
</body>

Le code vue.js :

const app = new Vue({
  el:'#app',
  data:{
    errors:[],
    nom:null,
    age:null,
    film:null,
	success:null
  },
  methods:{
    checkForm:function(e) {

     this.errors = [];
      if(!this.nom){
		this.errors.push("le nom est requis.");
		return false;
      };
      if(!this.age ){
		this.errors.push("L'age est requis.") ;
		return false;
	  };
	  if(this.age < 18){
		this.errors.push("L'age est trop bas.") ;
		return false;
	  };

	  this.success = ' Vous avez correctement rempli le formulaire ';
    }
  }
})

Les CSS :

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=number], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

Etape 2 : On veut colorer les champs ou la personne s’est trompé ..

Tester le code ici.

Il faut alors utiliser bootstrap vue :

 

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link type="text/css" rel="stylesheet" href="bootstrapvue/bootstrap.min.css" />
	<link type="text/css" rel="stylesheet" href="bootstrapvue/bootstrap-vue.css" />
	<script src="bootstrapvue/vue.js"></script>
	<script src="bootstrapvue/polyfill.min.js"></script>
	<script src="bootstrapvue/bootstrap-vue.js"></script>
</head>

<body>
	<div id="app">
		<div class="card " style="width: 18rem;">
			<b-form @submit="onSubmit" @reset="onReset" v-if="show">
				<b-form-group id="exampleInputGroup1" label="Email address:" label-for="exampleInput1" description="We'll never share your email with anyone else.">
					<b-form-input id="exampleInput1" type="email" v-model="form.email" required placeholder="Enter email"> </b-form-input>
				</b-form-group>
				<b-form-group id="exampleInputGroup2" label="Your Name:" label-for="exampleInput2">
					<b-form-input id="exampleInput2" type="text" v-model="form.name" required placeholder="Enter name"> </b-form-input>
				</b-form-group>
				<b-form-group id="exampleInputGroup3" label="Food:" label-for="exampleInput3">
					<b-form-select id="exampleInput3" :options="foods" required v-model="form.food"> </b-form-select>
				</b-form-group>
				<b-form-group id="exampleGroup4">
					<b-form-checkbox-group v-model="form.checked" id="exampleChecks">
						<b-form-checkbox value="me">Check me out</b-form-checkbox>
						<b-form-checkbox value="that">Check that out</b-form-checkbox>
					</b-form-checkbox-group>
				</b-form-group>
				<b-button type="submit" variant="primary">Submit</b-button>
				<b-button type="reset" variant="danger">Reset</b-button>
			</b-form>
		</div>
	</div>
</body>

Le code vue :

var app = new Vue({
		el: '#app',
		data() {
			return {
				form: {
					email: '',
					name: '',
					food: null,
					checked: []
				},
				foods: [{
					text: 'Select One',
					value: null
				}, 'Carrots', 'Beans', 'Tomatoes', 'Corn'],
				show: true
			}
		},
		methods: {
			onSubmit(evt) {
				evt.preventDefault();
				alert(JSON.stringify(this.form));
			},
			onReset(evt) {
				evt.preventDefault();
				/* Reset our form values */
				this.form.email = '';
				this.form.name = '';
				this.form.food = null;
				this.form.checked = [];
				/* Trick to reset/clear native browser form validation state */
				this.show = false;
				this.$nextTick(() => {
					this.show = true
				});
			}
		}
	})

Les CSS :

	.card {
		margin: 0 auto;
		/* Added */
		float: none;
		/* Added */
		margin-bottom: 10px;
		/* Added */
		margin-top: 5%;
	}
Publicités

#45a049, #4caf50, #ccc, #f2f2f2