如果填写了所有必填字段，如何更改按钮颜色答案

【问题标题】：how to change a button color if all the required fields are filled如果填写了所有必填字段，如何更改按钮颜色
【发布时间】：2021-04-06 04:35:16
【问题描述】：

这里我用 vue.js 写了代码。我已经验证了这些字段。在这里，当所有输入字段都完全填满时，我必须更改按钮颜色。此外，如果有任何字段未填写并且用户尝试提交表单，则未填写的字段应以红色边框突出显示。提前谢谢你，请帮助我。

<div id="app">
  <p>
    <label for='terms'>
      <input id='category' type='checkbox' v-model='category'/>
      <input id="title" type='text' v-model='title'/>
      <input id="address" type='text' v-model='address'>       
      <input id="city" type='text' v-model='city'/>
      <input id="state" type='text' v-model='state'/>
      <input id="zip" type='text' v-model='zip'/>
      <input id="price" type='text' v-model='price'/>
      <input id="Description" type='text' v-model='Description'/>
    </label>
    
  </p>

vue.js

new Vue({
 el: '#q-vikreya',

    components: {
        "vue-form-g": VueFormGenerator.component
    },

    data() {
            return {
            step:1,
            category:'',
            title:'',
            address:'',
            city:'',
            state:'',
            zip:'',
            price:'',
            description:'',
    methods: {
    checkForm: function (e) {
      if (this.category && this.title && this.address && this.city && this.state && this.price && this.description) {
        return true;
      }

      this.errors = [];

      if (!this.category) {
        this.errors.push('Name required.');
      }
      if (!this.title) {
        this.errors.push('Age required.');
      }
      if (!this.address) {
        this.errors.push('Age required.');
      }
      if (!this.city) {
        this.errors.push('Age required.');
      }
      if (!this.state) {
        this.errors.push('Age required.');
      }
      if (!this.price) {
        this.errors.push('Age required.');
      }
      if (!this.description) {
        this.errors.push('Age required.');
      }
      if (!this.description) {
        this.errors.push('Age required.');
      }
      e.preventDefault();
    },
      submitForm: function(){
            axios({
                method : "POST",
                url: "{% url 'PostAd' %}", //django path name
                headers: {'X-CSRFTOKEN': '{{ csrf_token }}', 'Content-Type': 'application/json'},
                data : {"category":this.category, "title":this.title,
                "address":this.address,
                "city": this.city,
                "state": this.state,
                "zip": this.zip,
                "price": this.price,
                "description": this.description,
                "radio_price": this.radio_price,
                "Job_title": this.model,
                },//data
              }).then(response => {
              console.log("response");
              console.log(response.data);
                  this.success_msg = response.data['msg'];
                 window.location.replace('{% url "classifieds" %}')  // Replace home by the name of your home view

              }).catch(err => {
                     this.err_msg = err.response.data['err'];
              console.log("response1");
              console.log(err.response.data);

              });

          },

  },

})

【问题讨论】：

标签： vue.js

【解决方案1】：

你不需要 js 或 vue 来实现它。您可以利用required 属性和:invalid 伪类来控制样式。

input {
  outline: none;
  border: solid 1px green;
}

input:invalid {
  border: solid 1px red;
}

input:invalid ~ button {
  background-color: red;
}

<label>Name: </label><input required="required" value="Alice" />
<br />
<label>Age: </label><input required="required" />
<br />
<label>Address: </label><input required="required" />
<br />
<button>Submit</button>

【讨论】：