Validating buttons and calling API & checking with the status of it

I want to know certain things about validating buttons.

I have used two inputs one is for API key and the other one is for SECRET Key, So initially user has to enter the Keys in both the field.

My first question is how do I validate this:

<div class="vx-form-group">
  <label class="Inpu1">API Key</label>
    <div class="col">
      <vs-input v-validate="'required|apiKey'" placeholder="API Key" name="apiKey" />
    </div>
</div>
<div class="vx-form-group" style="margin-bottom: 5%">
  <label class="Input2">Secret Key</label>
    <div class="col">
      <vs-input v-validate="'required|secretKey'" placeholder="Secret Key" name="secretKey" />
    </div>
</div>

My second question, I have used two buttons:

First in order to save it

Second one for CHECKING those keys entered. So whenever I click the CHECK button it has to call my API and check the status of it, If it returns a 200 then I want to display "connection is OK". If that is a 401 then I want to display "Connection not Ok".

Here s how I tried it:

<vs-button  class="btn " @click.prevent="apiform" 
  style="margin-right: 2%; ">
   Check
</vs-button>
<vs-button  class="btn">Save</vs-button>
<vs-button  class="close"  
  @click="$refs.modalName.closeModal()" style="margin-left: 2%">Cancel
</vs-button>

//in my script
<script>
  methods: {
    async apiform() {
      const response = await this.$http.post('https://my-api-goes-here', 
      {
        check: this.check
      })
      console.log(response)
      this.keys.push(response)
    }
  }
// If it returns a 200 then it means connection is OK. 
  // If it returns 401 then it means connection is Not ok.
</script>

Solution

For your first question, I see input fields, but their values are not bound to anything. Best thing to do is bind your inputs to variables using v-model as so:

<div class="vx-form-group">
  <label class="Inpu1">API Key</label>
    <div class="col">
      <vs-input v-model="apiKey" v-validate="'required|apiKey'" placeholder="API Key" name="apiKey" />
    </div>
</div>
<div class="vx-form-group" style="margin-bottom: 5%">
  <label class="Input2">Secret Key</label>
    <div class="col">
      <vs-input v-model="secretKey" v-validate="'required|secretKey'" placeholder="Secret Key" name="secretKey" />
    </div>
</div>

and in your script

<script>
export default{
name:'myComponentName',
data(){
   return{
   apiKey:'',
   secretKey:''
   }
}

That way you can check the values and validate them in your methods by using this.apiKey and this.secretKey.

For your second question, I use axios library, it makes http requests easy.I will assume $http.post returns a response with data and status, if that's the case (someone could correct me) you could check if response.status === 401 and handle it in whatever way you would like.